純css3開發(fā)的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;  
}