css radio 样式

最新推荐文章于 2023-06-13 16:36:37 发布

weixin_30340775

最新推荐文章于 2023-06-13 16:36:37 发布

阅读量255

点赞数

原文链接：http://www.cnblogs.com/mrt-yyy/p/11517988.html

版权

<div class="flex-h input">
<label>
<span class="musticon" style="color:#fff">*</span> 语言表达能力
</label>
<div class="flex-1 tx-r radio">
<input type="radio" name="n" id="n1" class="" />
<label for="n1" class="">
强
</label>
<input type="radio" name="n" id="n2" class="" />
<label for="n2" class="">
中
</label>
<input type="radio" name="n" id="n3" class="" />
<label for="n3" class="">
弱
</label>
</div>

</div>

.input div.radio label{
position: relative;
display: inline-block;
padding-left:15px;
}
.input div.radio input{
display: none;
}
.input div.radio label::before {
content: '';
position: absolute;
top: 50%;
left: 0;
transform: translate(0, -50%);
width:10px;
height:10px;
border:1px solid #9D9D9D;
border-radius: 100%;
}

.input div.radio input + label::before {
border:1px solid #FF9200;
}

.input div.radio input:checked + label::after {
content: '';
position: absolute;
top: 50%;
left:2px;
transform: translate(0, -50%);
width:6px;
height:6px;
border-radius: 100%;
background: #FF9200;
}