css重写checkbox样式
一、前言
默认的checkbox长这样：
<p>
<span><input type="checkbox" /></span>
<span>空闲</span>
<span><input type="checkbox" /></span>
<span>服务中</span>
</p>
有点丑，我想把它变成这样：
二、实现
1、checkbox 难看的框框隐藏掉，改用<label>元素连接到checkbox
<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>2、隐藏的框框的用自定义图片来代替
<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>3、给checkbox注册事件，原理就是点击的时候把他替换成另一张图片
<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>4、实现效果
三、结语
本来思路是想用js来实现这个功能的——点击的时候替换成另一个图片。结果问了下我们公司的前端，这么一搞，感觉好高大上啊！
路漫漫其修远兮，吾将上下而求索。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
