利用css更改checkbox默认样式

利用css更改checkbox默认样式

checkbox默认样式：

html部分代码：

<div id="container">
    <label>
        <input type="checkbox"  value="1" class="check-box"><span></span>选项一
    </label>
    <label>
        <input type="checkbox"  value="2" class="check-box"><span></span>选项二
    </label>
    <label>
        <input type="checkbox"  value="3" class="check-box"><span></span>选项三
    </label>
</div>

要想更改默认样式，首先需要将默认样式取消：

 .check-box{
    display: none;
  }

此时复选框就被取消显示了，页面显示为：

这时需要给input的兄弟span标签添加样式来替代原本的复选框：

.check-box+span{
    width:13px;
    height:13px;
    border:1px solid #ccc;
    display: inline-block;
    border-radius: 2px;
  }

这时可以看到复选框又出现了：

接下来可以设置checkbox选中时的样式了：

 .check-box:checked+span{
    background-color: pink;
  }

最后在选中框中添加对勾就可以啦！

/*通过绝对定位来确定对勾的位置*/
.check-box:checked+span:after{
     content: '\2714';/*这是html特殊字符的css编码*/
     color:#fff;
     position: absolute;
     top: -4px;
     left: 0;
     font-size: 13px;/*用字号来调整对勾的大小*/
  }
  
  /*不要忘了给span添加相对定位*/
  .check-box:checked+span{
    background-color: pink;
    position: relative;
  }