css radio 样式

Posted 2022-10-28 mrt-yyy

<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;