CSS中的focus事件是一種用于定義元素聚焦時的樣式的選擇器。
當一個元素被聚焦時,它會獲得用戶輸入焦點,通常是通過鼠標點擊或使用tab鍵進行導航。
對于表單元素來說,使用focus事件可以方便地改變用戶輸入時的樣式,如輸入框邊框的變化或錯誤提示信息的顯示。此外,使用focus事件還可以增強網站的交互性。
/* 將文本輸入框的邊框顏色改為紅色 */ input[type="text"]:focus { border: 1px solid red; } /* 表單元素獲取焦點時顯示錯誤提示信息 */ input[type="email"]:focus:invalid { color: red; border: 1px solid red; background-color: #ffeeee; }
在上述代碼中,當文本輸入框或郵箱輸入框獲取焦點時,分別改變了它們的邊框顏色和錯誤提示樣式。
總之,使用focus事件可以讓網站更具可用性和視覺吸引力。
下一篇css中標簽的分類