【源碼案例】純CSS3 Material Design風格單選框和複選框

這是一款使用純CSS3製作的Material Design風格單選框和複選框插件。該插件只需引入指定的CSS文件，然後配合特定的HTML結構，就可以生成漂亮的Material Design風格單選框和複選框。

 該純CSS3 Material Design風格單選框和複選框的github地址爲：https://github.com/bantikyan/icheck-material

Demo源碼下載地址：https://tc5.us/file/21793581-403946075

Demo截圖：

使用方法

在頁面中引入下面的文件。

<link rel="stylesheet" href="css/icheck-material.min.css" />	
<link rel="stylesheet" href="css/icheck-material-custom.min.css" />

HTML結構

複選框checkbox。

<div class="icheck-material-teal">	
    <input type="checkbox" id="someCheckboxId" />	
    <label for="someCheckboxId">Click to check</label>	
</div>

單選框radio。

<div class="icheck-material-teal">	
    <input type="radio" id="someRadioId1" name="someGroupName" />	
    <label for="someRadioId1">Option 1</label>	
</div>	
<div class="icheck-material-teal">	
    <input type="radio" id="someRadioId2" name="someGroupName" />	
    <label for="someRadioId2">Option 2</label>	
</div>

內聯樣式。

<div class="icheck-material-teal icheck-inline">    <input type="checkbox" id="chb1" />    <label for="chb1">Label 1</label></div><div class="icheck-material-teal icheck-inline">    <input type="checkbox" id="chb2" />    <label for="chb2">Label 2</label></div>

無label。

<div class="icheck-material-teal">	
    <input type="checkbox" id="someCheckboxId" />	
    <label for="someCheckboxId"></label>	
</div>