一、效果如图
二、实现
修改单选样式
//html
//less
@bf: 108rem;
.radio-wrap{
position: absolute;
top:100/@bf;
right:50/@bf;
height: 70/@bf;
width: 70/@bf;
line-height: 50/@bf;
vertical-align: middle;
input[type="radio"] {
width: 55/@bf;
height: 55/@bf;
opacity: 0;
cursor: pointer;
}
label{
position: absolute;
left: 0;
top: 0;
width: .61rem;
height:.6rem;
border-radius: 50%;
border: 1px solid #999999;
}
input:checked+label {
background: #fde117;
border: 1px solid #999999;
}
input:checked+label::after {
position: absolute;
content: "";
width: .13rem;
height: .3rem;
top: .07rem;
left: .2rem;
background: #fde117;
border: 2px solid #333;
border: 1px solid #333;
border-top: none;
border-left: none;
transform: rotate(45deg);
}
}
}
最后
以上就是大意保温杯最近收集整理的关于普通html和vue单选框的样式,修改原生单选框样式（vue单选组件）的全部内容，更多相关普通html和vue单选框内容请搜索靠谱客的其他文章。
发表评论 取消回复