CSS 復(fù)選框被選中樣式

復(fù)選框是常用的HTML表單元素之一。當(dāng)用戶勾選或取消勾選復(fù)選框時(shí)，我們也許需要改變復(fù)選框的樣式，以提醒用戶當(dāng)前的操作。下面我們就來(lái)看看如何設(shè)置 CSS 復(fù)選框被選中后的樣式。

首先，我們需要為復(fù)選框設(shè)置默認(rèn)樣式：

input[type="checkbox"] {
border: 1px solid #ccc;  /* 邊框 */
width: 20px;  /* 寬度 */
height: 20px;  /* 高度 */
border-radius: 2px;  /* 圓角 */
cursor: pointer;  /* 鼠標(biāo)形狀 */
}

接下來(lái)，我們?yōu)楸贿x中的復(fù)選框設(shè)置新樣式：

input[type="checkbox"]:checked {
background-color: #4CAF50; /* 背景色 */
border-color: #4CAF50; /* 邊框色 */
}

通過上述代碼，當(dāng)用戶勾選了復(fù)選框后，其背景色和邊框色將會(huì)變成#4CAF50，以提示用戶當(dāng)前復(fù)選框處于選中狀態(tài)。

我們也可以為復(fù)選框的選中狀態(tài)設(shè)置特殊的圖標(biāo)：

input[type="checkbox"][class="checkbox"] {
display: none; /* 隱藏原始復(fù)選框 */
}
.checkbox-label {
display: inline-block; /* 讓復(fù)選框文本垂直居中 */
position: relative; /* 為圖標(biāo)定位做準(zhǔn)備 */
padding-left: 25px; /* 留出圖標(biāo)位置 */
cursor: pointer;
}
.checkbox-label:before {
content: "";
display: inline-block; 
position: absolute; 
left: 0;
top: 0;
width: 16px;
height: 16px;
border: 2px solid #ccc;
border-radius: 2px;
}
.checkbox-label:after {
content: "";
display: none; /* 初始時(shí)不顯示圖標(biāo) */
position: absolute;
left: 3.5px;
top: 3.5px;
width: 8px;
height: 8px;
border-radius: 2px;
background-color: #4CAF50;
}
.checkbox:checked + .checkbox-label:after {
display: block; /* 復(fù)選框被勾選后顯示圖標(biāo) */
}

以上代碼實(shí)現(xiàn)了一個(gè)勾選后顯示綠色小勾的復(fù)選框。使用:before和:after偽類明確了圖標(biāo)的顯示位置和樣式，在:checked偽類后添加了才應(yīng)該顯示圖標(biāo)的規(guī)則。

除了以上的示例，我們也可以通過CSS的其他特性來(lái)改變復(fù)選框的其他樣式。如：字體、大小等等。

綜上，我們可以通過CSS輕松地改變復(fù)選框被選中后的樣式，使得用戶更加清晰地知道當(dāng)前的操作狀態(tài)。