单选框样式⾃定义单选框改变单选框border颜⾊css单选框
1、⾸先将原先的单选框隐藏掉。
2、利⽤label：before 在label的前⾯加⼀个元素来模拟单选框的样式。
3、利⽤：checked css选择器将选中的单选框单独设置样式。
4、具体样式⾃根据项⽬⼿动设置⽐较灵活。
代码如下：
<!--html-->
<ul class="pay_type">
<li v-for="(item,i) in circleData.charges_type":key="i">
<input
:id="item.id"
class="radio"
type="radio"
name="radios"
:value="JSON.stringify(item)"
v-model="checkedValue"
/>
<label
:for="item.id"
>{{pe}}</label>
</li>
</ul>
/
/css
> input {
display: none;
}
> label {
display: flex;
align-items: center;
}
> input[type="radio"]+ label:before {
content:"";
display: inline-block;
width:13px;
height:13px;
padding:3px;
border:1.5px solid #d7d7d7;
border-radius:50%;
background: #f5f5f5;
margin-right:10px;
}
border radius什么意思> input[type="radio"]:checked + label:before {
content:"";
border:1.5px solid #ff4443;
background: #ff4443 content-box;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。