CSS修改radio的样式（对勾效果和圆形效果）在实际开发中经常会遇到修改radio按钮的样式，所以在这⾥记录⼀下，⽅便以后使⽤
使⽤伪元素⽅法⽅式修改默认的radio和checkbox图标。
Radio
效果图：
具有代码如下：
可以按照具体需求进⾏修改
<input class="radio_type" type="radio" name="type" id="radio1" checked="checked"/>
<label for="radio1">radio1</label>
<input class="radio_type" type="radio" name="type" id="radio2" />
<label for="radio2">radio2</label>
label{
line-height: 20px;
display: inline-block;
margin-left: 5px;
margin-right:15px;
color: #777;
}
.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;
html radio点击变颜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);
}
.radio_type:checked+label{
color: #c59c5a;
}
圆形款只需稍微修改⼀下css便好
label{
line-height: 20px;
display: inline-block;
margin-left: 5px;
margin-right:15px;
color: #777;
}
.radio_type{
width: 20px;
height:20px;
appearance: none;
position: relative;
}
.radio_type:before{
content: '';
width: 20px;
height: 20px;
border: 2px solid #EDD19D;//可以再这⾥更改按钮边框的颜⾊  display: inline-block;
border-radius: 50%;
vertical-align: middle;
}
.radio_type:checked:before{
content: '';
width: 20px;
height: 20px;
border: 2px solid #EDD19D;//可以在这⾥颜⾊
display: inline-block;
border-radius: 50%;
vertical-align: middle;
}
.radio_type:checked:after{
content: '';
width: 12px;
height: 12px;
text-align: center;
background:#EDD19D;//可以在这⾥更改颜⾊
border-radius: 50%;
display: block;
position: absolute;
top: 6px;
left: 6px;
}
.radio_type:checked+label{
color: #EDD19D;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。