如何使用CSS3实现input多选框自定义样式

小编给大家分享一下如何使用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多选框自定义样式”有了一定的了解，如果想了解更多相关知识，欢迎关注编程网精选频道，感谢各位的阅读！