MENU

表单单选框,多选框美化

February 8, 2020 • Read: 40 • 折腾阅读设置

之前总是匆匆看过,如今终于知道该怎么搞了。。。

**利用label挂钩checkbox的特点来实现。
当html代码中,label的for属性值和checkbox的id值一样的时候,label就可以控制checkbox的选择了。
为label的伪元素添加背景图片,覆盖真正的checkbox对象,这样,既有图片的美观效果,又有checkbox一切的交互行为。
这里使用了定位,不然不能覆盖原始的复选框。而且文字和图片之间要间隔,文字也需要设置为定位对象。总之,这里都是定位关系。**

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

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

#check{     position:relative;}//对父元素坐定位,使下面对父元素为起点

结构是
<div id="check">
<input><label><span></span></label>
</div>

此处内容需要评论回复后方可阅读