使用伪类选择器修改radio的默认背景色

修改后

修改后

页面

//使用伪类覆盖单选框的样式
.radio_type {
width: 20px;
height: 20px;
appearance: none;
position: relative;
outline: none;
}
.radio_type:before {
content: ‘’;
width: 10px;
height: 10px;
border: 1px solid #00f0ff;
display: inline-block;
border-radius: 50%;
vertical-align: middle;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.radio_type:checked:before {
content: ‘’;
width: 10px;
height: 10px;
border: 1px solid #00f0ff;
display: inline-block;
border-radius: 50%;
vertical-align: middle;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.radio_type:checked:after {
content: ‘’;
width: 6px;
height: 6px;
text-align: center;
background: #00f0ff;
border-radius: 50%;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

使用伪类选择器修改radio的默认背景色