CSS復選框是網頁設計中常用的一個元素。通過改變CSS樣式,可以使復選框更加美觀、易于操作。以下是幾個常見的樣式:
input[type=checkbox]{ /*去掉默認樣式*/ -webkit-appearance:none; appearance:none; border:none; outline:none; /*修改大小*/ width:16px; height:16px; /*增加邊框*/ border:1px solid #ccc; /*增加圓角*/ border-radius:3px; /*添加背景*/ background-color:#fff; /*選中時背景*/ background-image:url(checked.png) background-position:center center; background-repeat:no-repeat; }
上述代碼會將復選框的樣式全部覆蓋,可以根據需要進行修改。
下面是一個利用CSS美化后的復選框樣式:
通過CSS改變label元素,可以實現點擊文字選中復選框的效果:
label{ cursor:pointer; }
除了基本的樣式修改,還可以使用偽類選擇器對復選框進行更多的操作。下面以勾選時的樣式為例:
input[type=checkbox]:checked{ background-color:#b3d4fc; }
這樣勾選時,復選框的背景會變為淺藍色。
總之,通過CSS可以輕松的改變復選框的樣式,提高網頁的美觀程度。
上一篇java 初始化和去除
下一篇css 復選框 樣式