CSS 復(fù)選框是常用于用戶界面中的表單元素。復(fù)選框通常用于表示用戶是否選擇了選項。我們可以使用 CSS 來控制復(fù)選框的外觀和行為。

/* 用 CSS 樣式選擇器來選中復(fù)選框 */
input[type="checkbox"] {
/* 將默認(rèn)的復(fù)選框樣式去掉 */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* 指定復(fù)選框的大小 */
width: 20px;
height: 20px;
/* 給復(fù)選框加上邊框 */
border: 1px solid #999;
/* 給復(fù)選框加上圓角 */
border-radius: 3px;
/* 將復(fù)選框的背景色改為白色 */
background-color: #fff;
/* 給復(fù)選框加上陰影效果 */
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
/* 將復(fù)選框的位置設(shè)置為相對定位 */
position: relative;
}
/* 鼠標(biāo)懸停在復(fù)選框時，改變背景色 */
input[type="checkbox"]:hover {
background-color: #f5f5f5;
}
/* 復(fù)選框被選中時改變背景樣式 */
input[type="checkbox"]:checked {
background-color: #007bff;
border-color: #007bff;
}
/* 選中復(fù)選框后，指定上下左右的選中樣式 */
input[type="checkbox"]:checked::before {
content: '?'; /* Unicode 編碼為 ? */
color: #fff;
position: absolute;
top: 0;
left: 3px;
font-size: 18px;
line-height: 1;
}
/* 未選中復(fù)選框后，指定上下左右的非選中樣式 */
input[type="checkbox"]::before {
content: '';
position: absolute;
top: 0;
left: 3px;
width: 14px;
height: 14px;
border-radius: 2px;
border: 1px solid #999;
}

使用上面的 CSS 樣式，我們可以輕松地為復(fù)選框添加自定義樣式，使其適應(yīng)不同的用戶界面。