CSS怎么給全選框加顏色 在HTML表單中，如果想要讓用戶可以一次選擇所有的選項，就需要用到全選框。默認情況下，全選框的樣式比較普通，只是一個簡單的復選框。那么如何用CSS來美化全選框并添加顏色呢？ 首先，在HTML文件中需要有一個全選框的input元素，常用的代碼如下所示：

<input type="checkbox" id="selectAll" name="selectAll">全選

然后，在CSS文件中可以為這個input元素添加樣式，讓它變得更加美觀和有吸引力。可以使用以下樣式代碼來設置全選框的樣式：

p {
font-size: 16px;
}
input[type="checkbox"][name="selectAll"] {
width: 20px;
height: 20px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 1px solid #ddd;
border-radius: 4px;
outline: none;
transition: all 0.3s ease-in-out;
cursor: pointer;
}
input[type="checkbox"][name="selectAll"]:checked {
background-color: #33ccff;
border-color: #33ccff;
}

代碼解釋： 1. 首先設置了p標簽的字體大小為16px，使得全選框的文本可以更好的展示。 2. 然后定義了一個input元素的樣式，其中設置了寬度和高度，讓復選框變成一個正方形。 3. 使用appearance屬性和border屬性來去掉input元素默認樣式，然后設置了元素的邊框、圓角和過渡效果，增加了元素的美觀性和交互性。 4. 最后，使用:checked偽類來設置input元素被選中時的樣式，包括背景色和邊框顏色。 通過上述代碼，可以為全選框添加顏色并讓它顯得更加美觀和實用，為用戶帶來更好的體驗。