CSS單選按鈕半選,是指在一組單選按鈕中,可以選擇其中一項或選中所有項中的部分項,這種狀態叫做半選。我們可以通過CSS代碼來實現這一效果。
.radio input[type="radio"] { display: none; } .radio input[type="radio"]:checked + label::before { /* 選中樣式 */ } .radio input[type="radio"]:indeterminate + label::before { /* 半選樣式 */ } /* CSS偽類 */ label::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 8px; vertical-align: middle; border: 1px solid #333; border-radius: 50%; } /* 選中樣式 */ label::before { background-color: #333; } /* 半選樣式 */ label::before { background-color: #ccc; }
在上面的代碼中,我們首先將單選按鈕的輸入框設為不可見,再通過偽類來添加樣式。當單選按鈕被選中時,我們可以通過`:checked`偽類選擇器來添加選中樣式。而當我們選中所有項中的部分項時,則會觸發`indeterminate`狀態,我們可以利用`:indeterminate`偽類選擇器來添加半選狀態下的樣式。
通過以上的CSS代碼,我們就可以在一組單選按鈕中添加半選狀態的樣式。
下一篇css單行文本省略