介绍, & lt; div 类=皉adio"比;
,,,& lt; input 类型=癱heckbox", id=皊ex1"比;
,,,& lt; label 为=皊ex1"祝辞& lt;/label>
,,男
& lt;/div>
& lt; div 类=皉adio"祝辞
,,,& lt; input 类型=癱heckbox", id=皊ex2"比;
,,,& lt; label 为=皊ex2"祝辞& lt;/label>女
& lt;/div> .radio {
,,,位置:,相对;
,,,显示:,inline-block;
,,,margin-right:, 12 px;
}
.radio input {
,,,宽度:,15 px;
,,,身高:,15 px;
,,,外观:,没有,/*清楚默认样式*/,,,-webkit-appearance:,没有;
,,,不透明度:,0;
,,,:轮廓,没有;
,,,z - index:, 8,,/*让输入层级高于标签,使之能选中*/,,,,
}
.radio label {
,,,位置:,绝对;
,,,左:,0;
,,,:,6 px;
,,,宽度:,15 px;
,,,身高:,15 px;
边境:,,,,1 px solid # 3582 e9;
}
.radio 输入:检查+标签:after {
内容,,,:,“,“;
,,,位置:,绝对;
,,,左:,4 px;
,,,:,0 px;
,,,/*,这里显示矩形的一半边框再旋转45度来实现对勾样式,*/,,,宽度:,5 px;
,,,身高:,12 px;
,,,边境:,1 px solid # 000000;
,,,边界底部:,1 px solid # 000000;
:,,,变换,旋转(45度);
}
小编给大家分享一下如何使用CSS3实现输入多选框自定义样式,希望大家阅读完这篇文章之后都有所收获、下面让我们一起去探讨吧!
原理:首先把输入元素隐藏掉,然后用CSS设置标签元素(其他元素也可以)的样式,选中时的样式使用输入:检查+标签选中标签,无须使用图片和JS
效果预览
html代码
CSS代码
看完了这篇文章,相信你对“如何使用CSS3实现输入多选框自定义样式”有了一定的了解,如果想了解更多相关知识,欢迎关注行业资讯频道,感谢各位的阅读!
