表單在網(wǎng)頁中起著重要的作用,但是過于簡單的樣式會顯得單調(diào)乏味。這時候,我們就可以借助CSS3來為表單增加一些特效,讓它更加美觀和優(yōu)雅。
以下是一些常用的表單特效:
input { border: none; border-bottom: 2px solid #ccc; background-color: transparent; outline: none; font-size: 16px; padding: 5px 10px; transition: all .3s ease; } input:focus { border-bottom: 2px solid #007bff; }
上述代碼通過去掉input的邊框,為其下方添加一個2像素粗的灰色橫線,并在input獲得焦點時改變下劃線顏色為藍(lán)色,實現(xiàn)了簡單而美觀的動態(tài)效果。
除了簡單的動態(tài)效果之外,我們還可以通過偽類來實現(xiàn)更多的樣式變化。例如,下面的代碼可以讓checkbox和radio按鈕在選中時顯示出不同的顏色:
input[type="checkbox"]:checked + label::before { content: "\2714"; background-color: #007bff; color: #fff; } input[type="radio"]:checked + label::before { content: "\2022"; color: #007bff; }
這段代碼通過::before偽類,在checkbox或radio按鈕前添加一個Unicode字符,在選中時變?yōu)樗{(lán)色或者顯示為一個實心圓點,為表單增加了可視化的效果。
在實現(xiàn)表單特效時,我們還可以使用CSS3的漸變效果、陰影效果、動畫效果等等。總之,可以通過CSS3為表單添加的特效非常多,讓你的網(wǎng)頁更加炫酷、動感和現(xiàn)代化。