CSS表單單選按鈕是Web開發中經常使用的元素,它是表單的一種類型。使用CSS可以對單選按鈕的外觀進行樣式定制,提高頁面的美觀度,下面是一些例子。
<label> <input type="radio" name="gender" value="male">男 </label> <label> <input type="radio" name="gender" value="female">女 </label>
在上面的例子中,每個單選按鈕都在一個label元素中,可以使得輸入控件的范圍更大,便于用戶在響應設備上使用。樣式定制可以通過css來實現,例如下面這些例子。
input[type="radio"] { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 24px; height: 24px; border: 2px solid #999; border-radius: 50%; background-color: #fff; } input[type="radio"]:checked { border-color: #007bff; background-color: #007bff; }
在上面的例子中,我們使用了appearance屬性來去除瀏覽器默認樣式,然后通過設置寬高、邊框、邊框半徑和背景顏色實現樣式定制。在單選按鈕被選中時,我們通過:checked偽類來實現選中狀態下的樣式。
最后,我們可以通過將一組單選按鈕放在同一命名的name屬性下來實現互斥的功能。
<h4>請選擇您的興趣愛好:</h4> <input type="radio" name="hobby" value="swim">游泳 <input type="radio" name="hobby" value="run">跑步 <input type="radio" name="hobby" value="bike">騎行
在上面的例子中,只能選擇三個中的一個,不能多選或者不選。這就是CSS表單單選按鈕的基本應用。