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);}

效果:

 

posted @ 2017-03-02 17:40  任小小  阅读(179)  评论(0编辑  收藏  举报