怎么样借助用CSS3美化单选框 radio 、多选框 checkbox 和 switch开关按钮
有时候大家需要美化单选框radio和多选框checkbox,由于原生的样式比较丑陋,而且表现不统一。CSS3之前通常用js来模拟,而现在完全可以用纯CSS达成radio和checkbox的美化。对于手机端非常早就写过有关的模拟样式:一个合适手机端的checkbox和css3达成的switch开关按钮。这两篇文章仅仅支持手机端的页面,而webkit上也正好支持单标记的input元素是用伪类(:before或:after)。近期做PC端项目,考虑到兼容更多的PC浏览器,所以在这基础上作了一些改进。
先来看看成效:
微信截图_20181127160857.png
再来看一下HTML结构:
html代码:
<labelclass="bui-radios-labelbui-radios-anim">
<inputtype="radio"name="sex"/><iclass="bui-radios"></i>男
</label>
这个结构有一个label标签,其中包括input元素和i元素。基本的原理是:第一用visibility:hidden;opacity:0;将input元素“隐藏”起来,借助label标签的特质,在点击时将input元素选中或取消选中。i元素结合伪类(:before或:after)模拟单选框radio和多选框checkbox的外观。
最后看看CSS代码:
css代码:
/*radio*/
label.bui-radios-labelinput{
position:absolute;
opacity:0;
visibility:hidden;
}
label.bui-radios-label.bui-radios{
display:inline-block;
position:relative;
width:13px;
height:13px;
background:#FFFFFF;
border:1pxsolid#979797;
border-radius:50%;
vertical-align:-2px;
}
label.bui-radios-labelinput:checked+.bui-radios:after{
position:absolute;
content:"";
width:7px;
height:7px;
background-color:#fff;
border-radius:50%;
TOP:3px;
left:3px;
}
label.bui-radios-labelinput:checked+.bui-radios{
background:#00B066;
border:1pxsolid#00B066;
}
label.bui-radios-labelinput:disabled+.bui-radios{
background-color:#e8e8e8;
border:solid1px#979797;
}
label.bui-radios-labelinput:disabled:checked+.bui-radios:after{
background-color:#c1c1c1;
}
label.bui-radios-label.bui-radios-anim.bui-radios{
-webkit-transition:background-colorease-out.3s;
transition:background-colorease-out.3s;
}
这里有几个方面需要说明的是:
1.checkbox中的勾勾用了iconfont,当然你可以改下图片,或用伪类(:before或:after)模拟。
2.添加了一些容易的过渡成效或背景动画。
3.特别要紧的一点是:借助label标签的特质,对于HTML基础不好同学来讲,请先认识一下label标签的特质。
本文转载自中文网
希望以上内容可以解决您的问题!
如有其他问题欢迎大家一起交流学习!
►本文网址:http://www.nsxcb.cn/CSS/CSS3/20220510/14144.html
►凡本站提供教程均已验证教程的准确性。