checkbox 点击改变checked_自定义checkbox

思路

1 label+input绑定

2 剪裁隐藏或者display:none

3 :before :checked

1 首先是通过

<div class="normal-box">
    <input class="special-box" type="checkbox" id="awesome">
    <label for="awesome" class="special-label">awesome</label>
</div>

label的for属性和input绑定

绑定之后就可以点击label里面的文字实现点击整个checkbox

2 隐藏原来的checkbox

原来的checkbox，原来的需要隐藏掉，不然会影响美观

3 绑定

for=“id”

label绑定checkbox的意思，其实就是通过点击label改变checkbox的状态。

ps:小程序通过这种方法是不可行的。

4 伪类

伪类的目的也是为更容易的封装

另外，需要用到的伪类也是为乐减少js的介入，封装个ui再引入一堆js，就不值当的了。

注：不用:after是因为代码结构的问题，想用after伪类也不是不行，但是需要改变HTML的结构，问题其实不大

:before,:checked伪类

github链接

blackcloud2333/demo​github.com