改写radio样式
发布时间：2020-12-14 04:16:39 所属栏目：大数据 来源：网络整理
导读：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{ posit
|
<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);
}
.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;
}
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |