CSS 伪类修改input选中样式

input{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-block;
}
input:after{
content: "";
font-size: 18px;
display: inline-block;
width: 14px;
height: 14px;
line-height: 14px;
text-align: center;
border: 1px solid #666fff;
vertical-align: bottom;
}
input:checked:after{
content: "\2714";
}

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

 

 

input#status{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-block;
width: 46px;
height: 20px;
padding: 0 3px;
border-radius: 8px;
background-color: #ccc;
position: relative;
outline: none;
}

input#status:checked{
background-color: limegreen;
justify-content: flex-end;
}

input#status::after{
position: absolute;
left: 4px;
top: 1px;
content: "";
display: inline-block;
width: 18px;
height: 18px;
border-radius: 50%;
background-color: #eee;
transition: left ease-in .2s;
}

input#status:checked::after{
background-color: #aaa;
left: 24px;
}

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