旗下导航:搜·么
当前位置:网站首页 > HTML > 正文

怎样利用用CSS3美化单选框 radio 、多选框 checkbox 和 switch开关按钮【html5教程】

作者:搜搜PHP网发布时间:2019-11-26分类:HTML浏览:102


导读:本篇文章给人人带来的内容是关于怎样应用用CSS3美化单选框radio、多选框checkbox和switch开关按钮,有肯定的参考价值,有须要的朋侪能够参考一下,愿望对你有...
本篇文章给人人带来的内容是关于怎样应用用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网别的相干文章!

标签:CSS3美化单选框radiocheckbox