使用伪元素
<input class="radio_type" type="radio" name="type" id="radio2" />
<label for="radio2">radio2</label>
.radio_type{
width: 20px;
height: 20px;
appearance: none;
position: relative;
}
.radio_type:before{
content: ‘‘;
width: 20px;
height: 20px;
border: 1px solid #7d7d7d;
display: inline-block;
border-radius: 50%;
vertical-align: middle;
}
.radio_type:checked:before{
content: ‘‘;
width: 20px;
height: 20px;
border: 1px solid #c59c5a;
background:#c59c5a;
display: inline-block;
border-radius: 50%;
vertical-align: middle;
}
.radio_type:checked:after{
content: ‘‘;
width: 10px;
height:5px;
border: 2px solid white;
border-top: transparent;
border-right: transparent;
text-align: center;
display: block;
position: absolute;
top: 6px;
left:5px;
vertical-align: middle;
transform: rotate(-45deg);
}
原文地址:https://www.cnblogs.com/mcll/p/11433800.html
时间: 2024-10-13 01:18:18