欢迎来到模板无忧!织梦模板,dede模板下载,织梦cms模板,免费网站模板下载站

模板无忧

怎么样借助用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标签的特质。




本文转载自中文网


希望以上内容可以解决您的问题!
如有其他问题欢迎大家一起交流学习!
作者:酱油妹 来源:www.srgoc.cn 关注: 时间:2022-05-10 14:00
版权声明:凡注明来源为http://www.nsxcb.cn的均为本站原创,转载请注明来源。
本文网址:http://www.nsxcb.cn/CSS/CSS3/20220510/14144.html
凡本站提供教程均已验证教程的准确性。
相关教程
在线客服

织梦模板 整站模板 新手教程 使用技巧