以前做自定义样式的radio, checkbox 的时候，一直是如下结构
然后定义diyRadio 的样式作为新Radio, 再用js 做关联。
知道今天才知道可以用标签的for 属性 + :checked 做，纯CSS
（ 真是太不应该了，学东西还是要认真、细致点。 ）
DIY 单选项示例如下：
/* 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;}
以上就是使用CSS自定义radio、checkbox样式的示例详解的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1608741.html
微信扫一扫 
支付宝扫一扫 
