<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> input{width: 0;height: 0;position: absolute;left: -9999em} *{margin: 0;padding: 0} label{position: relative;height: 25px;display: block;} input[type="radio"] + label::before { content: "a0"; /*不换行空格*/ display: inline-block; width: 18px; height: 18px; margin-right: 5px; border-radius: 50%; border: 1px solid #01cd78; text-indent: 5px; } input[type="radio"] + label::after { content: "a0"; /*不换行空格*/ display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 50%; background: #01cd78; position: absolute; left: 5px; top: 5px; opacity: 0; } input[type="radio"]:checked + label::after { opacity:1; } input[type="checkbox"] + label::before { content: "a0"; /*不换行空格*/ display: inline-block; width: 18px; height: 18px; margin-right: 5px; border: 1px solid #01cd78; text-indent: 5px; } input[type="checkbox"] + label::after { content: "a0"; /*不换行空格*/ display: inline-block; width: 10px; height: 10px; margin-right: 5px; background: #01cd78; position: absolute; left: 5px; top: 5px; opacity: 0; } input[type="checkbox"]:checked + label::after { opacity:1; } i{font-style: normal} </style> </head> <body> <div class="female"> <input type="radio" id="female" name="sex" checked/> <label for="female"><i>女</i></label> </div> <div class="male"> <input type="radio" id="male" name="sex" /> <label for="male"><i>男</i></label> </div> <div class="female"> <input type="checkbox" id="female2" name="sex" checked/> <label for="female2"><i>鱼</i></label> </div> <div class="male"> <input type="checkbox" id="male2" name="sex" /> <label for="male2"><i>熊掌</i></label> </div> </body> </html>
