改写radio样式
Posted wangpeiyuan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了改写radio样式相关的知识，希望对你有一定的参考价值。
<div class="test">
<input type="radio" name="radioHouse" class="radio" id="big">
<label for="big">大床房</label>
</div>
<div class="test">
<input type="radio" name="radioHouse" class="radio" id="small">
<label for="small">小床房</label>
</div>
.radio{
position: absolute; //隐藏label标签原本的样式
clip: rect(0, 0, 0, 0);
}
.radio:checked + label::before{
content: "a0";
display: inline-block;
width:0.25rem;
height:0.25rem;
border-radius: 50%;
opacity:0.9;
border:0.05rem solid #55D8C2;
background-clip: content-box;
background-color: #01cd78;
padding: .2em;
}
.radio + label::before{
content: "a0";
display: inline-block;
width:0.55rem;
height:0.55rem;
border-radius: 50%;
opacity:0.9;
border:0.05rem solid #999;
text-indent: .15em;
line-height: 0.5rem;
margin-right: .4em;
vertical-align: middle;
}
以上是关于改写radio样式的主要内容，如果未能解决你的问题，请参考以下文章