很多时候在做移动端,还有小程序的时候经常会遇见UI设计的图中单选的颜色会很据系统的颜色而改变， 但是radio并不支持改变其本身的颜色，于是就产生了如何去改变radio颜色的问题。

<input type="radio" name="sex" value="boy">
<label for="boy" class="sexStyle">男</label> <br>
<input type="radio" name="sex" value="girl" >
<label for="girl" class="sexStyle">女</label>

默认是蓝色，而且也不是很好看，现在就可以通过css的伪元素来修改这个样式。

input[type="radio"]+label::before {
     content: " ";
     display: inline-block;
     vertical-align: middle;
     width: 13px;
     height: 13px;
     border-radius: 50%;
     border: 1px solid #999999;
     margin-right: 0.2rem;
     box-sizing: border-box;
     margin-top: -0.1rem;
}

input[type="radio"]:checked+label::before {
     background-color: #d73c3a;
     background-clip: content-box;
     border: 1px solid #d73c3a;
     padding: 0.1rem;
     box-sizing: border-box;
}
input[type="radio"] {
     position: absolute;
     clip: rect(0, 0, 0, 0);
}

通过伪元素覆盖原本的颜色，同时又保持了可点击，这样就能非常完美的解决这个问题了。

原文链接：https://blog.csdn.net/weixin_45461128/article/details/117420970