自定义input type=checkbox

一个比较常见的需求，自定义checkbox那个箭头的样式

核心思想是用一个lable和checkbox绑定，将css加到label上，然后隐藏原来的checkbox

先写个checkbox加label，给label前加个伪元素

    <div>
        <input type="checkbox" id="test">
        <label for="test">是否同意</label>
    </div>

    input[type="checkbox"] + label::before {
        content: "\a0";
        display: inline-block;
        width: 15px;
        height: 15px;
        line-height: 15px;
        background-color: silver;
        border-radius: 5px;
    }

---

checkbox选中时，修改伪元素里的内容，\2713是一个√

    input[type="checkbox"]:checked + label::before {
        content: "\2713";
        background-color: gold;
    }

---

然后隐藏原来的checkbox

    input[type="checkbox"] {
        display: none;
    }