在CSS中,選擇單選框(radio button)通常使用input元素中的type屬性設(shè)置為“radio”,這樣才能夠?qū)崿F(xiàn)單選功能。以下是一個(gè)示例代碼:
<input type="radio" name="gender" value="male" checked> Male
<input type="radio" name="gender" value="female"> Female
在上面的代碼中,我們創(chuàng)建了兩個(gè)單選框,它們都有相同的name屬性“gender”,這是用于讓瀏覽器識(shí)別哪些單選框是同一組的必要屬性。而checked屬性則是用來(lái)指定哪個(gè)單選框默認(rèn)被選中。
接下來(lái),我們可以為這些單選框設(shè)置樣式。我們可以使用CSS的實(shí)時(shí)偽類::checked 去選擇選中的元素。以下是代碼示例:
input[type="radio"]:checked { background-color: #3498db; color: #fff; }
在上面的代碼中,我們?yōu)樗羞x中的單選框設(shè)置了背景顏色和字體顏色。
通過(guò)這種方式,我們就可以輕松自定義單選框的樣式,從而實(shí)現(xiàn)更好的用戶體驗(yàn)。