CSS中有一個偽類叫做:focus
,它可以為獲得焦點的元素添加樣式。在網頁中,當用戶點擊或通過Tab鍵選擇一個表單元素時,該元素會獲得焦點,這時就可以通過:focus
來對它進行樣式設置。
input:focus { border: 2px solid #00bfff; outline: none; }
在以上代碼中,當用戶點擊一個文本輸入框時,它將獲得2個像素寬的藍色邊框,并且去掉默認的外邊框。這樣可以使表單更加美觀,且提升用戶使用體驗。
:focus偽類不僅適用于表單元素,也可以用于其他元素,例如鏈接、按鈕等。在用戶點擊時,它們將獲得一個可見的焦點效果,讓頁面更加動態。
a:focus { color: red; text-decoration: underline; } button:focus { background-color: #00ff7f; }
以上代碼分別為鏈接和按鈕元素添加了:focus樣式,在點擊后會改變顏色、下劃線和背景顏色。
綜上所述,:focus
是一個十分實用的偽類,可以為網頁元素增加更多的樣式效果,提升用戶體驗。
上一篇mysql的更改字段名稱
下一篇css font 居中