这篇文章主要介绍了纯css实现radio和checkbox实现效果示例的相关资料,内容挺不错的，现在分享给大家，也给大家做个参考。
radio-and-checkbox
纯CSS实现radio和checkbox实现效果
reset-radio
在开发PC端的项目时，经常会用到radio和checkbox组件，可是因为原生的样式相对来说不符合设计师的设计风格，所以我们可能会经常引用第三方的模块去实现，或者通过JS等其他方式去hack。这样相对来说增加了代码量不说，还特别复杂，所以才有了这个纯CSS依赖原生input[radio]和input[checkbox]的实现方式，主要代码如下：
立即学习“前端免费学习笔记（深入）”；
html主要代码
CSS代码，这里主要是通过一个子节点span去配合input:checked兄弟选择器，来修改样式
.reset-radio { display: inline-block; position: relative; width: 16px; height: 16px;}.reset-radio .real-target { z-index: 1; width: 100%; height: 100%; position: absolute; display: inline-block; background: #ffffff; border: 1px solid #dadde0; border-radius: 100%; top: 0; left: 0; bottom: 0;}.reset-radio input[type=radio] { cursor: pointer; z-index: 2; width: 16px; height: 16px; opacity: 0; position: absolute; left: 0; top: 0; margin: 0; right: 0; bottom: 0;}.reset-radio input:checked+span { border-color: #48b4ec;}.reset-radio input:checked+span::before { content: ''; position: absolute; background: #48b4ec; width: 6px; height: 6px; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 100%;}reset-checkbox
reset-checkbox原理是一样的就不在赘述了。
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
关于css属性的选择对动画性能的影响
IE下模拟css3中box-shadow的效果
div仿checkbox表单样式的美化和功能
以上就是CSS实现radio和checkbox的 实现效果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1610488.html
微信扫一扫 
支付宝扫一扫 
