首页>前端教程>CSS教程

checkbox复选框样式美化的问题

复选框,单选框都不好直接用css样式美化,总得用点奇思妙想才行。

如果只考虑谷歌内核的浏览器的话,那么用appearance属性可以搞定大部分表单控件的样式。关键是这个appearance属性IE不支持,这就逼得大家另想办法了。

利用label挂钩checkbox的特点来实现。

当html代码中,label的for属性值和checkbox的id值一样的时候,label就可以控制checkbox的选择了。

html代码如下:

<div id="check">
    <input type="checkbox" id="btn-check">
    <label for="btn-check"><span>全天</span></label>
</div>

为label的伪元素添加背景图片,覆盖真正的checkbox对象,这样,既有图片的美观效果,又有checkbox一切的交互行为。

设计一个图片如下,默认状态,点击状态,不可用状态。

btn1.png

这里使用了定位,不然不能覆盖原始的复选框。而且文字和图片之间要间隔,文字也需要设置为定位对象。总之,这里都是定位关系。

这个效果只兼容IE9以上。

#check{
	position:relative;}
input[type=checkbox]+label{
	position:absolute;
	width:60px;
	height:20px;}
input[type=checkbox]+label:before{
	content:"";
	position:absolute;
	width:20px;
	height:20px;
	background:url(images/btn1.png) no-repeat;
	}
input[type=checkbox]+label span{
	font-size:14px;
	position:absolute;
	left:30px;}
input[type=checkbox]:checked+label:before{
	background-position:-28px 0;}
input[type=checkbox]{
	position:absolute;
	left:0;
	top:0;}

具体效果如下:

See the Pen vawgVP by zhaolanzhen (@mrszhao) on CodePen.

点赞


10
保存到:

相关文章

Top