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>