<html>
<body style="margin:100px">
<div class="female">
<input type="radio" id="female" name="sex" />
<label for="female">女</label>
</div>
<br/>
<div class="male">
<input type="radio" id="male" name="sex" />
<label for="male">男</label>
</div>
<style type="text/css">
*{margin: 0px;padding: 0px;}
input[type="radio"] + label::before {
content: "\a0"; /*不换行空格*/
display: inline-block;
vertical-align: middle;
font-size: 18px;
width: 1em;
height: 1em;
margin-right: .4em;
border-radius: 50%;
border: 1px solid #01cd78;
text-indent: .15em;
line-height: 1;
padding: .2em;
}
input[type="radio"]:checked + label::before {
background-color: #01cd78;
background-clip: content-box;
padding: .2em;
}
input[type="radio"] {
position: absolute;
clip: rect(0, 0, 0, 0);
}
</style>
</body>
</html>
