HTML單選按鈕是網站中常見的表單元素之一,在頁面上通過單選按鈕設置樣式可以增強用戶體驗和提高頁面美觀度。
<style> /* 設置單選按鈕樣式 */ .radio-btn { margin-right: 10px; height: 18px; width: 18px; outline: none; border-radius: 50%; border: 2px solid #bbb; box-shadow: inset 0 0 0 0.2em #fff; transition: all 0.2s ease-in-out; } /* 設置選中狀態的樣式 */ .radio-btn:checked { border-color: #007bff; background-color: #007bff; box-shadow: inset 0 0 0 0.2em #fff, 0 0 0 0.3em #007bff; } </style> <!-- 創建單選按鈕 --> <input type="radio" class="radio-btn" name="gender" value="male" id="male"><label for="male">男</label> <input type="radio" class="radio-btn" name="gender" value="female" id="female"><label for="female">女</label>
以上代碼中,我們使用了CSS樣式表來設定單選按鈕的樣式,包括圓形邊框、圓角、陰影等。當選中某個單選按鈕時,我們使用checked偽類來修改其樣式,從而使得選中的單選按鈕呈現出不同的樣式。
最后,我們通過創建input元素,并且使用class屬性來引用CSS樣式表中設定的樣式,來創建單選按鈕。通過將多個單選按鈕綁定到同一個name屬性上,實現單選按鈕的分組功能。
上一篇css 不可獲取焦點
下一篇html的圖標代碼怎么寫