CSS怎么自定義復(fù)選按鈕 復(fù)選按鈕是HTML表單中的一個重要元素，可以讓用戶在多個選項之間進行選擇。但是，原始的復(fù)選框樣式很難滿足我們的審美要求，因此，我們需要自定義復(fù)選按鈕的樣式。在CSS中，我們可以通過偽類選擇器和偽元素來實現(xiàn)這一目標(biāo)。 1.清除默認樣式 首先，我們需要清除瀏覽器默認的復(fù)選框樣式。通過設(shè)置input[type=checkbox]的樣式為none，可以使其不再顯示原始樣式。

input[type=checkbox]{
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
}

2.定義自定義樣式 其次，我們需要定義我們自己的樣式。我們可以使用偽元素:before和:after來模擬出復(fù)選框，并使用偽類選擇器:checked來改變選中時的樣式。

input[type=checkbox]:before{
content:'';
display:inline-block;
width: 16px;
height:16px;
margin-right:5px;
border:1px solid #000;
background-color:#fff;
}
input[type=checkbox]:after{
content:'';
display:inline-block;
width: 4px;
height:10px;
margin-top:3px;
margin-left:3px;
border: solid;
border-width: 0px 3px 3px 0px;
transform: rotate(45deg);
visibility:hidden;
}
input[type=checkbox]:checked:after{
visibility:visible;
}

在這里，我們?yōu)閭卧?before和:after分別定義了樣式。其中，偽元素:before用于模擬出復(fù)選框框框，而偽元素:after用于模擬出勾選圖標(biāo)。我們使用transform屬性使勾選圖標(biāo)變?yōu)橐粋€斜角矩形，使用visibility屬性來實現(xiàn)未選中時勾選圖標(biāo)隱藏，選中時勾選圖標(biāo)可見的效果。 3.完整代碼 最終的CSS代碼如下所示：

input[type=checkbox]{
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
}
input[type=checkbox]:before{
content:'';
display:inline-block;
width: 16px;
height:16px;
margin-right:5px;
border:1px solid #000;
background-color:#fff;
}
input[type=checkbox]:after{
content:'';
display:inline-block;
width: 4px;
height:10px;
margin-top:3px;
margin-left:3px;
border: solid;
border-width: 0px 3px 3px 0px;
transform: rotate(45deg);
visibility:hidden;
}
input[type=checkbox]:checked:after{
visibility:visible;
}

通過上述的CSS樣式，我們可以實現(xiàn)一個具有自定義樣式的復(fù)選框。當(dāng)然，我們也可以根據(jù)不同的需求來對樣式進行更改。希望這篇文章能對你有所幫助。