自定义复选框checkbox样式

时间 2019-11-21

原文原文链接

复选框做为网页中比较常见的一个组件，有的时候咱们须要对它进行美化，可是咱们没法直接为其定义样式，因此咱们须要一些其它的办法。html

表单元素中有label 元素和 for属性，当咱们点击label 标签时，对应的表单元素就会有所反应。咱们就是依据这个特性来实现的。编码

html:3d

<body>
    <input type="checkbox" id="myCheck">
    <label for="myCheck"></label>
</body>

既然是自定义，咱们就要把label 假装成复选框的样子，比较常见的是方框状，因此咱们就有了以下的CSS样式。code

#myCheck + label{
    background-color: white;
    border-radius: 5px;
    border:1px solid #d3d3d3;
    width:20px;
    height:20px;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    line-height: 20px;
}

这样咱们就为label 元素定义为圆角的正方形边框，而后就须要根据复选框的状态进行相应的样式调整。htm

#myCheck:checked + label{
    background-color: #eee;
}
#myCheck:checked + label:after{
    content:"\2714";
}

上述代码分别为label 元素定义了复选框选中状态时应具备的样式，好比背景色变灰、并且添加了“√”，\2714就是相应的编码。blog

这样咱们就大功告成了，可是别忘了，咱们要将自带的checkbox 定义为display:none; 这样就能够隐藏自带的复选框了。图片

效果图（不要忘记将原来的设为隐藏，这里为展现效果）：
input