默认的checkbox长这样:
<p>
<span><input type="checkbox" /></span>
<span>空闲</span>
<span><input type="checkbox" /></span>
<span>服务中</span>
</p>
有点丑,我想把它变成这样:
<p>
<input type="checkbox" class="e-selfecheckbox" id="place1">
<label class="selfecheckbox_label" for="place1">空闲</label>
<input type="checkbox" class="e-selfecheckbox" id="place2">
<label class="selfecheckbox_label" for="place2">服务中</label>
</p>
<style>
.e-selfecheckbox{
display: none;
}
</style>
<style type="text/css">
.e-selfecheckbox {
display: none;
}
.selfecheckbox_label:before {
content: "";
display: inline-block;
vertical-align: middle;
width: 13px;
height: 13px;
background-image: url(img/scheduling_icon_uncheck2.png);
background-size: 100%;
}
</style>
<style type="text/css">
.e-selfecheckbox {
display: none;
}
.selfecheckbox_label:before {
content: "";
display: inline-block;
vertical-align: middle;
width: 13px;
height: 13px;
background-image: url(img/scheduling_icon_uncheck2.png);
background-size: 100%;
}
/*在e-selfecheckbox元素被选择的时候,将selfecheckbox_label前面的图片替换成另一张*/
.e-selfecheckbox:checked+.selfecheckbox_label:before {
background-image: url(img/scheduling_icon_checked2.png);
}
</style>
本来思路是想用js来实现这个功能的——点击的时候替换成另一个图片。结果问了下我们公司的前端,这么一搞,感觉好高大上啊!
路漫漫其修远兮,吾将上下而求索。