在vue循环生成的单选框中,想要调整单选框的样式则需要额外添加一个label,再将input隐藏转而调整label的样式。
input {
display: none;
}
label {
width: 10%;
height: 100%;
display: inline-block;
position: relative;
color: #999;
}
label:active {
background: #eeeeee;
}
label:after {
content: ""; /*必须设置*/
display: inline-block;
width: 15px;
height: 15px;
border: 3px solid rgb(108, 98, 219);
position: absolute;
border-radius: 50%;
}
input:checked + label:after {
background-color: rgb(108, 98, 219);
}
<div class="div" v-for="(item, index) in sizes" :key="index">
<div class="left">
<input
:id="index"
type="radio"
name="size"
v-model="size"
:value="item.goodsName"
class="radio_type"
@click="check(index)"
/>
<label :for="index"></label>
<i>{{ item.goodsName }}</i>
</div>
使用双向绑定来达到动态改变
效果如下: