如何使用CSS3实现input多选框自定义样式
小编给大家分享一下如何使用CSS3实现input多选框自定义样式，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！
在商河等地区，都构建了全面的区域性战略布局，加强发展的系统性、市场前瞻性、产品创新能力，以专注、极致的服务理念，为客户提供成都网站设计、网站制作 网站设计制作按需网站策划,公司网站建设,企业网站建设,品牌网站建设,营销型网站建设,外贸网站制作,商河网站建设费用合理。
原理：首先把input元素隐藏掉，然后用CSS设置label元素（其他元素也可以）的样式，选中时的样式使用input:check+label选中label，无须使用图片和JS
效果预览
html代码
男
女
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; /*让input层级高于label，使之能选中*/
}
.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;
/* 这里显示矩形的一半边框再旋转45度来实现对勾样式 */
width: 5px;
height: 12px;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
transform: rotate(45deg);
}看完了这篇文章，相信你对“如何使用CSS3实现input多选框自定义样式”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！
分享标题：如何使用CSS3实现input多选框自定义样式
标题网址：
http://kswsj.cn/article/pgihjj.html
