提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: HTML教程 > 怎样利用用CSS3美化单选框 radio 、多选框 checkbox 和 switch开关按钮【html5教程】,CSS3美化单选框,radio,radio,checkbox

本篇文章给人人带来的内容是关于怎样应用用CSS3美化单选框 radio 、多选框 checkbox 和 switch开关按钮,有肯定的参考价值,有须要的朋侪能够参考一下,愿望对你有所协助。

许多时刻我们须要美化单选框 radio 和多选框 checkbox ,由于原生的款式比较貌寝,而且表现不一致。CSS3之前平常用 js 来模仿,而现在完整能够用纯CSS完成radio和checkbox的美化。关于挪动端很早就写过相干的模仿款式:一个合适挪动端的checkbox 和 css3完成的switch开关按钮 。这两篇文章仅仅支撑挪动端的页面,而 webkit 上也恰好支撑单标记的 input 元素是运用伪类(:before或:after)。近来做PC端项目,考虑到兼容更多的PC浏览器,所以在这基本上作了一些革新。

先来看看结果:

再来看一下HTML构造:

html 代码:

<label class="bui-radios-label bui-radios-anim">
<input type="radio" name="sex"/><i class="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-label input {
position: absolute;
opacity: 0;
visibility: hidden;
}
label.bui-radios-label .bui-radios {
display: inline-block;
position: relative;
width: 13px;
height: 13px;
background: #FFFFFF;
border: 1px solid #979797;
border-radius: 50%;
vertical-align: -2px;
}
label.bui-radios-label input:checked + .bui-radios:after {
position: absolute;
content: "";
width: 7px;
height: 7px;
background-color: #fff;
border-radius: 50%;
top: 3px;
left: 3px;
}
label.bui-radios-label input:checked + .bui-radios {
background: #00B066;
border: 1px solid #00B066;
}
label.bui-radios-label input:disabled + .bui-radios {
background-color: #e8e8e8;
border: solid 1px #979797;
}
label.bui-radios-label input:disabled:checked + .bui-radios:after {
background-color: #c1c1c1;
}
label.bui-radios-label.bui-radios-anim .bui-radios {
-webkit-transition: background-color ease-out .3s;
transition: background-color ease-out .3s;
}

这里有几点须要申明的是:

1. checkbox 中的 勾勾运用了iconfont,固然你能够改下图片,或用伪类(:before或:after)模仿。

2. 添加了一些简朴的过渡结果 或 背景动画。

3. 迥殊主要的一点是:应用 label 标签的特征,关于HTML基本不好同砚来讲,请先相识一下 label 标签的特征。

以上就是对怎样应用用CSS3美化单选框 radio 、多选框 checkbox 和 switch开关按钮的悉数引见,假如您想相识更多有关CSS3教程,请关注ki4网。

以上就是怎样应用用CSS3美化单选框 radio 、多选框 checkbox 和 switch开关按钮的细致内容,更多请关注ki4网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

上一篇:

下一篇:

相关推荐

0 条评论关于"怎样利用用CSS3美化单选框 radio 、多选框 checkbox 和 switch开关按钮【html5教程】,CSS3美化单选框,radio,radio,checkbox"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线