.magic-radio{ ???position: absolute; ???display: none;}.magic-radio + label { ???position: relative; ???display: block; ???padding-left: 30px; ???cursor: pointer; ???vertical-align: middle; ???padding-left: 1.5rem !important; ???min-width: auto !important;}.magic-radio:checked + label:before { ???background: #3e97eb; ???border-color: #3e97eb;}.magic-radio + label:before { ???border-radius: 50%;}.magic-radio + label:before { ???position: absolute; ???top: 0; ???left: 0; ???display: inline-block; ???width: 25px; ???height: 25px; ???content: ‘‘; ???border: 1px solid #c0c0c0;}.magic-radio:checked + label:after{ ???display: block;}.magic-radio + label:after { ???top: 5px; ???left: 10px; ???box-sizing: border-box; ???width: 8px; ???height: 15px; ???transform: rotate(45deg); ???border-width: 2px; ???border-style: solid; ???border-color: #fff; ???border-top: 0; ???border-left: 0;}.magic-radio + label:after{ ???position: absolute; ???display: none; ???content: ‘‘;}html:
<div class="opt" ><input class="magic-radio" type="radio" name="radio" id="r1" value="option1"><label for="r1">男</label></div>
最终效果：
css3美化radio样式
原文地址：http://www.cnblogs.com/momozjm/p/7519937.html