使用css修改checkbox选择框的样式

二. 修改思路：

• 给原本的checkbox框加上visibility: hidden;属性，使其隐藏同时又占据原本在页面上面的位置，说直白点就是，使checkbox看不见，但是仍然占有原来的位置。

• 然后使用绝对定位label标签覆盖到checkbox框上面，通过修改label标签达到修改checkbox框的目的。

三. 具体代码：

代码一：设置“√”为元素的内容，点击之后显示对勾

// HTML代码
<input type="checkbox" id="test" class="test">同意
<label for="test"></label>
// CSS代码
<style>
    #test{
        visibility: hidden;
    }

    #test +label{
        width: 18px;
        height: 18px;
        background-color: #c07721;
        display: block;
        position: relative;
        top: -18px;
        left: -2px;
        border-radius: 4px;
        cursor: pointer;
        overflow: hidden;
    }

    #test:checked +label:before{
        content: "√";       /*这里设置选中之后的显示内容*/
        width: 18px;
        height: 18px;
        display: block;
        color: #ffffff;
        text-align: center;
        font-weight: bolder;
        line-height: 18px;
    }
</style>

效果一：

代码二：设置背景图片,点击之后，显示背景图片

// HTML代码
<input type="checkbox" id="test" class="test">同意
<label for="test"></label>
// CSS代码
<style>
    #test{
        visibility: hidden;
    }

    #test +label{
        width: 18px;
        height: 18px;
        background-color: #666666;
        display: block;
        position: relative;
        top: -18px;
        left: -2px;
        border-radius: 4px;
        cursor: pointer;
        overflow: hidden;
    }

    #test:checked +label:before{
        content: " ";
        width: 18px;
        height: 18px;
        background: url("img/check.jpg") no-repeat;
        background-size: 100% auto;
        display: block;
        color: #ffffff;
        text-align: center;
        font-weight: bolder;
        line-height: 18px;
    }
</style>

效果二：