分享更有价值
被信任是一种快乐

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

文章页正文上

这篇文章主要介绍“怎么用CSS3美化单选框和多选框”,在日常操作中,相信很多人在怎么用CSS3美化单选框和多选框问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么用CSS3美化单选框和多选框”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
  很多时候我们需要美化单选框radio和多选框checkbox,因为原生的样式比较丑陋,而且表现不统一。CSS3之前一般用js来模拟,而如今完全可以用纯CSS实现radio和checkbox的美化。对于移动端很早就写过相关的模拟样式:一个适合移动端的checkbox和css3实现的switch开关按钮。这两篇文章仅仅支持移动端的页面,而webkit上也正好支持单标记的input元素是使用伪类(:before或:after)。最近做PC端项目,考虑到兼容更多的PC浏览器,所以在这基础上作了一些改进。
  看一下HTML结构:
  html代码:
  
  
  
  这个结构有一个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;
  tran免费云主机、域名sition:background-colorease-out.3s;
  }
  这里有几点需要说明的是:
  1.checkbox中的勾勾使用了iconfont,当然你可以改下图片,或用伪类(:before或:after)模拟。
  2.添加了一些简单的过渡效果或背景动画。
  3.特别重要的一点是:利用label标签的特性,对于HTML基础不好同学来说,请先了解一下label标签的特性。

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

相关推荐: react用g6的方法

本篇文章和大家了解一下react用g6的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 react用g6使用方法:1、通过“npm install –save @antv/g6”命令在项目引入AntV G6;2、使用“yarn ins…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册