使用CSS自定义radio、checkbox样式的示例详解

<label>
 <span class="diyRadio">
 <input type="radio" name=" value="">
 </span>
 <span>文字</span>
</label>

<!-- HTML -->
<p class="radio-beauty-container">
 <label>
 <span class="radio-name">radio1</span>
 <input type="radio" name="radioName" id="radioName1" hidden/>
 <label for="radioName1" class="radio-beauty"></label>
 </label>
 <label>
 <span class="radio-name">radio2</span>
 <input type="radio" name="radioName" id="radioName2" hidden/>
 <label for="radioName2" class="radio-beauty"></label>
 </label>
 <label>
 <span class="radio-name">radio3</span>
 <input type="radio" name="radioName" id="radioName3" hidden/>
 <label for="radioName3" class="radio-beauty"></label>
 </label>
</p>

/* CSS */
.radio-beauty-container {
 font-size: 0;
}
.radio-beauty-container .radio-beauty:hover, .radio-beauty-container input[type="radio"]:checked + .radio-beauty {
 padding: 2px;
 background-color: green;
 background-clip: content-box;
}
.radio-beauty-container .radio-name {
 vertical-align: middle;
 font-size: 16px;
}
.radio-beauty-container .radio-beauty {
 width: 18px;
 height: 18px;
 box-sizing: border-box;
 display: inline-block;
 border: 1px solid green;
 vertical-align: middle;
 margin: 0 15px 0 3px;
 border-radius: 50%;
}
.radio-beauty-container .radio-beauty:hover {
 box-shadow: 0 0 7px green;
}