CSS 伪类修改input选中样式

 主要是用到了after伪类和字体符号。

 1 input{
 2     -webkit-appearance: none;
 3     -moz-appearance: none;
 4     appearance: none;
 5     display: inline-block;
 6 }
 7 input:after{
 8     content: "";
 9     font-size: 18px;
10     display: inline-block;
11     width: 14px;
12     height: 14px;
13     line-height: 14px;
14     text-align: center;
15     border: 1px solid #666fff;
16     vertical-align: bottom;
17 }
18 input:checked:after{
19     content: "\2714";
20 }

1 <label for="gender-male">男</label><input id="gender-male" type="radio" name="gender" value="男">
2 <label for="gender-female">女</label><input id="gender-female" type="radio" name="gender" value="女">

效果如下：

 

来源：oschina

链接：https://my.oschina.net/u/4327212/blog/4405936