CSS(Cascading Style Sheets)是一種描述網頁或XML文檔外觀的語言。在網頁中,表單單選框經常被用于選擇多個選項中的一個,在CSS中,我們可以使用“:checked”偽類選擇器控制單選框的樣式。
input[type="radio"]:checked { background-color: #003366; color: #fff; }
上面的代碼中,我們通過input[type="radio"]選擇器選擇所有單選框,再加上:checked偽類選擇器,表示選擇被選中的單選框。接下來,我們可以為選中的單選框設置樣式,比如改變背景顏色和文本顏色。
另外,在CSS中,我們還可以使用偽元素:before和:after來為單選框增加自定義樣式。
input[type="radio"] + label:before { content: ""; display: inline-block; background-color: #fff; border: 2px solid #003366; border-radius: 50%; width: 20px; height: 20px; margin-right: 10px; } input[type="radio"]:checked + label:before { background-color: #003366; }
上面的代碼中,我們使用input[type="radio"] + label:before選擇單選框前面的label元素,并使用:before偽元素為其添加自定義樣式,比如圓形邊框和空白區域。當單選框被選中時,使用:checked偽類選擇器和:before偽元素為其添加新的樣式,比如改變背景顏色。
總的來說,CSS中提供了豐富的選擇器和偽類/元素,可以讓我們靈活地控制表單單選框的外觀和交互效果。