CSS3是一種較新的技術,它帶來了大量的新特性和改進。其中之一就是form偽類,它可以讓我們更靈活地控制表單元素的樣式和行為。
/* 選擇真正選中的單選框或復選框 */ input:checked { border-color: red; } /* 鼠標懸停在表單元素上時樣式 */ input:hover, textarea:hover, select:hover { background-color: lightblue; } /* 輸入框獲取焦點時的樣式 */ input:focus, textarea:focus, select:focus { border-color: blue; box-shadow: 0 0 5px blue; }
使用偽類選擇器,我們可以輕松地控制表單元素的不同狀態下的樣式。例如,上面的第一個樣式規則選擇已被選中的單選框和復選框,并將它們的邊框顏色設為紅色。
第二個樣式規則將鼠標懸停在表單元素(如文本輸入框、文本域和下拉列表)上時的背景顏色設為淡藍色。
第三個樣式規則用于處理輸入框獲得焦點之后的情況。如果某個輸入框得到了焦點,它的邊框顏色將變為藍色,并且呈現一個淡藍色的陰影效果。這可以幫助用戶更直觀地了解自己正在與哪個表單元素交互。
上一篇css3 iphonex
下一篇css3 grid框架