更改checkbox的默认样式

最新推荐文章于 2023-10-16 10:34:28 发布

weixin_30404405

最新推荐文章于 2023-10-16 10:34:28 发布

阅读量439

点赞数

原文链接：http://www.cnblogs.com/yszblog/p/10144056.html

版权

最近做一个vue项目要用到checkbox要修改默认样式，选中是纯白色，不选择只有白色边框，起初以为很容易，没想到还折腾了一翻，记录一下。

几经折腾，理清input 和label的关系

最终改进版本，将复选框隐藏，利用label元素的焦点传递特性，用label的样式替代复选框。这应该是最简版了，可以随意改样式了。

贴上代码：

<input type="checkbox" value=""  @change="bindProductCheck1" v-model="ckeckVal"
       id="checkbox-p1" style="display: none;">
<label for="checkbox-p1"></label>
</div>

.container{
display:flex;
}

#checkbox-p1 + label {
  width:44px;
  height:44px;
  box-sizing: border-box;
  border-radius: 22px;
  border: 4px solid #fff;
}

#checkbox-p1:checked + label {
  background-color: #ffffff;
}
所以了解底层原理就没那么容易被坑了

转载于:https://www.cnblogs.com/yszblog/p/10144056.html