您现在的位置是：主页 > news > 大连网站建设选高和科技/最新经济新闻
大连网站建设选高和科技/最新经济新闻
admin2025/6/3 7:05:48【news】
简介大连网站建设选高和科技,最新经济新闻,网站个人简介怎么做,wordpress手机端菜单被挤到第二行复选框，单选框都不好直接用css样式美化，总得用点奇思妙想才行。如果只考虑谷歌内核的浏览器的话，那么用appearance属性可以搞定大部分表单控件的样式。关键是这个appearance属性IE不支持，这就逼得大家另想办法了。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答疑栏目，欢迎学习！
