复选框样式圆圈html,css怎么美化复选框样式

复选框，单选框都不好直接用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答疑栏目，欢迎学习！