CSS 單選框默認樣式如下:
input[type=radio] { box-sizing: border-box; padding: 0; margin: 0; display: inline-block; appearance: none; background-color: transparent; border: 1px solid #ccc; border-radius: 50%; width: 16px; height: 16px; position: relative; top: 3px; vertical-align: middle; cursor: pointer; } input[type=radio]:checked::before { content: ''; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background-color: #4285F4; }
以上代碼實現了一般的單選框樣式。其中,通過設置邊框為圓形并給定背景顏色,使單選框得以顯示出來。通過設置寬高、定位以及偽元素before的樣式,來實現被選中時的狀態。
需要注意的是,IE瀏覽器不支持 appearance 屬性,導致單選框在這個瀏覽器中顯示為默認樣式。如果需要兼容 IE,建議使用 img 標簽代替 input[type=radio]。