CSS3提供了一個非常方便的功能,即通過點擊表單邊框來獲取焦點。這可以幫助用戶更好地識別當前活動的表單,提高用戶體驗。下面我們將結合代碼示例來介紹如何實現這一功能。
input:focus { border: 2px solid red; outline: none; } input[type="checkbox"]:focus + label { border: 2px solid red; outline: none; } input[type="radio"]:focus + label { border: 2px solid red; outline: none; }
首先,我們使用input
偽類選擇器來定義輸入框獲取焦點時的樣式。我們將邊框寬度設置為2px,顏色設置為紅色。另外,我們使用outline
屬性將默認的外邊框樣式去除。
其次,我們同樣需要定義單選框和復選框獲取焦點時的樣式。這里我們使用input[type="checkbox"]
和input[type="radio"]
進行匹配,并將樣式應用在相鄰的
綜上所述,在CSS3中實現點擊表單邊框獲取焦點是非常簡單的。我們只需要給input
以及相鄰的
上一篇css3 點擊有波動效果
下一篇css3 畫出拼圖