以前做自定義樣式的radio, checkbox 的時候，一直是如下結構

文字

然后定義diyRadio 的樣式作為新Radio, 再用js 做關聯。

知道今天才知道可以用標簽的for 屬性 + :checked 做，純CSS

(真是太不應該了，學東西還是要認真、細致點。)

DIY 單選項示例如下：

radio1

radio2

radio3

/* CSS */

.radio-beauty-container {

font-size: 0;

}

.radio-beauty-container .radio-beauty:hover, .radio-beauty-container input[type="radio"]:checked + .radio-beauty {

padding: 2px;

background-color: green;

background-clip: content-box;

}

.radio-beauty-container .radio-name {

vertical-align: middle;

font-size: 16px;

}

.radio-beauty-container .radio-beauty {

width: 18px;

height: 18px;

box-sizing: border-box;

display: inline-block;

border: 1px solid green;

vertical-align: middle;

margin: 0 15px 0 3px;

border-radius: 50%;

}

.radio-beauty-container .radio-beauty:hover {

box-shadow: 0 0 7px green;

}

總結

以上是生活随笔為你收集整理的html自定义radio样式,用纯CSS 自定义radio checkbox 样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。