之前作自定義樣式的radio, checkbox 的時候,一直是以下結構spa
<label> <span class="diyRadio"> <input type="radio" name=" value=""> </span> <span>文字</span> </label>
而後定義diyRadio 的樣式做爲新Radio, 再用js 作關聯。code
知道今天才知道能夠用<label></label>標籤的for 屬性 + :checked 作,純CSS
( 真是太不該該了,學東西仍是要認真、細緻點。 )ip
DIY 單選項示例以下:get
<!-- HTML --> <div 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> </div>
/* 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; }
效果:
http://codepen.io/jawil/pen/N...
( 示例做者:jawil(codepen) )input