html自定义radio样式,用纯CSS 自定义radio checkbox 样式

以前做自定义样式的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 样式的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。