复选框,单选框都不好直接用css样式美化,总得用点奇思妙想才行。如果只考虑谷歌内核的浏览器的话,那么用appearance属性可以搞定大部分表单控件的样式。关键是这个appearance属性IE不支持,这就逼得大家另想办法了。
css怎么美化复选框样式
利用label挂钩checkbox的特点来实现。
当html代码中,label的for属性值和checkbox的id值一样的时候,label就可以控制checkbox的选择了。
html代码如下:
全天
为label的伪元素添加背景图片,覆盖真正的checkbox对象,这样,既有图片的美观效果,又有checkbox一切的交互行为。
设计一个图片如下,默认状态,点击状态,不可用状态。(相关课程推荐:css视频教程)
这里使用了定位,不然不能覆盖原始的复选框。而且文字和图片之间要间隔,文字也需要设置为定位对象。总之,这里都是定位关系。
这个效果只兼容IE9以上。
CSS#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;
}
本文来自css答疑栏目,欢迎学习!