主要是用到了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>
效果如下:
