有些时候我们需要对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%;
}
Logo

前往低代码交流专区

更多推荐