欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

css 復選框實用

錢衛國2年前9瀏覽0評論

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可以輕松的改變復選框的樣式,提高網頁的美觀程度。