修改checkbox样式的一种方式

开发过程中经常需要对checkbox控件的样式进行修改，本文给出了一种checkbox控件样式修改的方式。

改写原生控件样式

checkbox默认的样式如下：

    width:10px;
    height:10px;
    border-radius:2px;
    border:1px solid rgb(118,118,118);
    box-sizing:border-box;

可以使用css直接修改默认的样式，增加各种效果，如下面的代码：

    input[type="checkbox"] 
    {
        width: 20px;
        height: 20px;
        margin: 0;
    }

修改选中状态下的样式

使用appearance: none隐藏默认checkbox的框框，重写框框样式。其原理是通过绝对定位覆盖原多选框。

（1）覆盖原多选框，注意其中的 appearance: none;

    input[type="checkbox"] 
    {
        width: 20px;
        height: 20px;
        appearance: none;
        margin: 0 4px 0 0;
        position: relative;
    }

（2）改写选中状态样式

    input[type="checkbox"]::before
    {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        background: #fff;
        width: 100%;
        height: 100%;
        border: 1px solid #09303b;
        border-radius: 4px;
    }

    input[type="checkbox"]:checked::before
    {
        /*content: "\2713";*/
        content: "\2716";/*\2713表示打勾，\2716表示打叉*/
        background-color: #fff;
        position: absolute;
        top: 0;
        left: 0; 
        width: 100%;
        height: 100%;
        border: 1px solid #09303b;
        border-radius: 4px;
        color: #f00;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
        line-height: 20px;
    }

此外，还有将checkbox隐藏，利用label样式进行修改的方式。