radio美化

今天遇到一个难题，我需要修改单选按钮选中的颜色，百度了一下，简直可怕，原来超级复杂，幸得一大神相助，代码如下：

html:

<input id="radio-1" name="radio" type="radio" checked><label for="radio-1"></label>
<input id="radio-2" name="radio" type="radio"><label for="radio-2"></label>

css:

/* 自定义单选框样式*/
input[type='radio']{ display:none;}
input[type='radio']+label{display:inline-block;position:relative;overflow:hidden;width:18px;height:18px;vertical-align:middle;border:1px solid #888;
background-color:#fff;margin-right:10px;cursor:pointer;border-radius:50%;}
input[type='radio']+label:after{content:'';position:absolute;top:3px;left:3px;width:10px;height:10px;
background-color: #17CDA6;border-radius: 50%;transform:scale(0);}
input[type='radio']:checked+label{background-color:#fff;}
input[type='radio']:checked+label:after{background:-color:#17CDA6;transform:scale(1);}

效果：

 

转载于:https://www.cnblogs.com/ryt103114/p/6491751.html