vue中checkbox修改为圆形样式

最新推荐文章于 2024-07-30 16:26:17 发布

cc25485697

最新推荐文章于 2024-07-30 16:26:17 发布

阅读量9.8k

点赞数 4

文章标签： vue.js css html css3

本文链接：https://blog.csdn.net/cc25485697/article/details/107365537

版权

有些时候我们需要对checkbox进行样式修改，例如改为圆圈：

checkbox代码

 <input type="checkbox" class="layers-item-selector" :value="item.name" v-model="value" />

css样式

.layers-item-selector {
  outline: none;
  width: 16px;
  height: 16px;
  background-color: #ffffff;
  border: solid 0px #cccccc;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  font-size: 0.8rem;
  margin: 0;
  padding: 0;
  cursor:pointer;
  appearance:none;
  -webkit-appearance: none;
  -webkit-user-select: none;
  user-select: none;
}
/*直接用图片代替选中的样子，如果不需要，可设置背景色*/
.layers-item-selector:checked {
  /* background: #0242c6; */
  background: url("../../assets/images/checkbox_checked.png") no-repeat;
  background-size: 100% 100%;
}