怎么用CSS3美化单选框和多选框

这篇文章主要介绍“怎么用CSS3美化单选框和多选框”，在日常操作中，相信很多人在怎么用CSS3美化单选框和多选框问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么用CSS3美化单选框和多选框”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

目前创新互联已为成百上千家的企业提供了网站建设、域名、虚拟空间、网站托管维护、企业网站设计、郓城网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

很多时候我们需要美化单选框radio和多选框checkbox，因为原生的样式比较丑陋，而且表现不统一。CSS3之前一般用js来模拟，而如今完全可以用纯CSS实现radio和checkbox的美化。对于移动端很早就写过相关的模拟样式：一个适合移动端的checkbox和css3实现的switch开关按钮。这两篇文章仅仅支持移动端的页面，而webkit上也正好支持单标记的input元素是使用伪类（：before或：after）。最近做PC端项目，考虑到兼容更多的PC浏览器，所以在这基础上作了一些改进。

看一下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标签的特性。

到此，关于“怎么用CSS3美化单选框和多选框”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！

本文名称：怎么用CSS3美化单选框和多选框
网站网址：https://www.cdcxhl.com/article12/gooidc.html

成都网站建设公司_创新互联，为您提供移动网站建设、全网营销推广、网站制作、网站设计、App开发、小程序开发

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联