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="女">

效果如下：

---------------------------------------2020-09-10 新增---------------------------------------

CSS实现开关效果

1 input#status{
 2     -webkit-appearance: none;
 3     -moz-appearance: none;
 4     appearance: none;
 5     display: inline-block;
 6     width: 46px;
 7     height: 20px;
 8     padding: 0 3px;
 9     border-radius: 8px;
10     background-color: #ccc;
11     position: relative;
12     outline: none;
13 }
14
15 input#status:checked{
16     background-color: limegreen;
17     justify-content: flex-end;
18 }
19
20 input#status::after{
21     position: absolute;
22     left: 4px;
23     top: 1px;
24     content: "";
25     display: inline-block;
26     width: 18px;
27     height: 18px;
28     border-radius: 50%;
29     background-color: #eee;
30     transition: left ease-in .2s;
31 }
32
33 input#status:checked::after{
34     background-color: #aaa;
35     left: 24px;
36 }

1 <div style="display: flex; align-items: center;">
2     <label for="status">切换</label><input id="status" type="checkbox">
3 </div>

效果如下: