纯css3开发的checkbox、radio和switch
//radio
<label for="radio3" class="tg-icheck-radio tg-icheck-flat-radio">
<input type="radio" id="radio3" name="sex1" checked>
<div class="tg-icheck-media"></div>
<div class="tg-icheck-inner">
<div class="tg-icheck-title">男</div>
</div>
</label>
//checkbox
<label for="checkbox1" class="tg-icheck-checkbox">
<input type="checkbox" id="checkbox1" checked>
<div class="tg-icheck-media"></div>
<div class="tg-icheck-inner">
<div class="tg-icheck-title">篮球</div>
</div>
</label>
//switch
<label class="tg-switch tg-switch-3" for="switch1">
<input type="checkbox" id="switch1">
<div class="tg-switch-media">
<span class="switch-label"></span>
</div>
<div class="tg-switch-inner">switch1</div>
</label>
.tg-icheck-radio > input:checked + .tg-icheck-media {
border-color: #009a61;
background: #009a61;
}
总结
美化radio和checkbox的方式有很多种,只要知道了原理,你就可以实现属于你自己的独特风格页面。