vue中checkbox修改为圆形样式
有些时候我们需要对checkbox进行样式修改,例如改为圆圈:checkbox代码<input type="checkbox" class="layers-item-selector" :value="item.name" v-model="value" />css样式.layers-item-selector {outline: none;width: 16px;height: 16
·
有些时候我们需要对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%;
}
更多推荐
已为社区贡献2条内容
所有评论(0)