修改checkbox默认样式

利用CSS3伪类修改CheckBox样式

• 下面是html代码

<div>
    <input type="checkbox" id="checkbox"/>
    <label for="checkbox">登陆</label>
</div>

• CSS 代码

        #checkbox{
            width: 15px;
            height: 15px;
            margin-left: -15px;
            opacity: 0;
        }
        input[type="checkbox"] + label::before {
        content: '\a0'; /* non-break space */
        display: inline-block;
        vertical-align: center;
        width: 15px;
        height: 15px;
        margin-right: 10px;
        border-radius: 3px;
        background: silver;
        text-indent: 2px;
        line-height: 1;
        }
        input[type="checkbox"]:checked + label::before {
        content: '\2713';
        background: yellowgreen;
        }
        input[type="checkbox"]:focus + label::before {
        //box-shadow: 0 0 .1em .1em #58a;
        }
        input[type="checkbox"]:disabled + label::before {
        background: gray;
        box-shadow: none;
        color: #555;
        }

实现原理,将checkbox隐藏.用label:before伪造一个checkbox;
选中checkbox时,用checkbox:checked 与 label:before 添加选中样式
选中之后点击, 利用checkbox:disabled 与 label:before 将伪造的checkbox置为非选中状态

• 赋CSS伪类中content各种特殊符号:
• https://www.cnblogs.com/wujindong/p/5630656.html