.radio input,
.checkbox input {
display: none;
}
.radio input[type="radio"] + div,
.checkbox input[type="checkbox"] + div {
display: inline-block;
background: white;
font-size: 12px;
padding: 4px 14px;
margin: 2px 10px;
border-radius: 36px;
box-shadow: 1px 1px 1px #c4c5c5;
user-select: none;
}
.radio input[type="radio"]:checked + div,
.checkbox input[type="checkbox"]:checked + div {
color: white;
background: #d86599;
}
//vue
<label class="checkbox" v-for="item of feelings" :key="item.value" style="display:inline-block">
<input type="checkbox" :value="item.value" :checked="item.checked" v-model="aaa">
<div>{{item.value}}</div>
</label>
data:{
aaa: [],
feelings: [{ value: "品种太少" }, { value: "价格贵"}, { value: "操作不顺畅"}, { value: "其他问题" }]
}
