CSS單選按鈕半選,是指在一組單選按鈕中,可以選擇其中一項(xiàng)或選中所有項(xiàng)中的部分項(xiàng),這種狀態(tài)叫做半選。我們可以通過CSS代碼來實(shí)現(xiàn)這一效果。
.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; }
在上面的代碼中,我們首先將單選按鈕的輸入框設(shè)為不可見,再通過偽類來添加樣式。當(dāng)單選按鈕被選中時(shí),我們可以通過`:checked`偽類選擇器來添加選中樣式。而當(dāng)我們選中所有項(xiàng)中的部分項(xiàng)時(shí),則會(huì)觸發(fā)`indeterminate`狀態(tài),我們可以利用`:indeterminate`偽類選擇器來添加半選狀態(tài)下的樣式。
通過以上的CSS代碼,我們就可以在一組單選按鈕中添加半選狀態(tài)的樣式。