小编给大家分享一下如何使用CSS3实现input多选框自定义样式，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！
原理：首先把input元素隐藏掉，然后用CSS设置label元素（其他元素也可以）的样式，选中时的样式使用input:check+label选中label，无须使用图片和JS
效果预览
html代码
<div class="radio"> <input type="checkbox" id="sex1"> <label for="sex1"></label> 男</div><div class="radio"> <input type="checkbox" id="sex2"> <label for="sex2"></label> 女</div>CSS代码
.radio { position: relative; display: inline-block; margin-right: 12px;}.radio input { width: 15px; height: 15px; appearance: none; -webkit-appearance: none; opacity: 0; outline: none; z-index: 8; }.radio label { position: absolute; left: 0; top: 6px; width: 15px; height: 15px; border: 1px solid #3582E9;}.radio input:checked+label::after { content: ""; position: absolute; left: 4px; top: 0px; width: 5px; height: 12px; border-right: 1px solid #000000; border-bottom: 1px solid #000000; transform: rotate(45deg);}看完了这篇文章，相信你对“如何使用CSS3实现input多选框自定义样式”有了一定的了解，如果想了解更多相关知识，欢迎关注编程网行业资讯频道，感谢各位的阅读！
