- 利用checkbox绑定label实现。点击label时等同于点击checkbox。
<input type="checkbox" id="c1">
<label htmlFor="c1">
- 接下来就是将checkbox隐藏掉,
visibility: hidden
,不能用display:none
。 - 接着是定义定义checkbox
checked
时的事件。在点击时基于label做一些样式处理。
#c1{
&:checked + label:before{
//自定义样式
}
}