美化 Radio 和 Checkbox

美化 radio

有简单的背景动画：

男 女

无动画：

男 女

禁用状态（disabled）：

不男不女 不男不女

<!--有简单的背景动画：-->
<label class="bui-radios-label bui-radios-anim">
    <input type="radio" name="sex"/><i class="bui-radios"></i> 男
</label>
<label class="bui-radios-label bui-radios-anim">
    <input type="radio" checked="" name="sex"/><i class="bui-radios"></i> 女
</label>
<!--无动画：-->
<label class="bui-radios-label">
    <input type="radio" name="sex"/><i class="bui-radios"></i> 男
</label>
<label class="bui-radios-label">
    <input type="radio" name="sex"/><i class="bui-radios"></i> 女
</label>
<!--禁用状态（disabled）：-->
<label class="bui-radios-label">
    <input type="radio" disabled="" name="sex"/><i class="bui-radios"></i> 不男不女
</label>
<label class="bui-radios-label">
    <input type="radio" checked="" disabled="" name="ddd"/><i class="bui-radios"></i> 不男不女
</label>

美化 checkbox

有简单的背景动画：

男 女

无动画：

男 女

禁用状态（disabled）：

不男不女 不男不女

<!--有简单的背景动画：-->
<label class="bui-checkbox-label  bui-checkbox-anim">
    <input type="checkbox" checked="" name="sex"/><i class="bui-checkbox"></i> 男
</label>
<label class="bui-checkbox-label  bui-checkbox-anim">
    <input type="checkbox" name="sex"/><i class="bui-checkbox"></i> 女
</label>
<!--无动画：-->
<label class="bui-checkbox-label">
    <input type="checkbox" checked="" name="sex"/><i class="bui-checkbox"></i> 男
</label>
<label class="bui-checkbox-label">
    <input type="checkbox" name="sex"/><i class="bui-checkbox"></i> 女
</label>
<!--禁用状态（disabled）：-->
<label class="bui-checkbox-label">
    <input type="checkbox" disabled="" name="sex"/><i class="bui-checkbox"></i> 不男不女
</label>
<label class="bui-checkbox-label">
    <input type="checkbox" checked="" disabled="" name="ddd"/><i class="bui-checkbox"></i> 不男不女
</label>

用 checkbox 模拟 switch

简单的过渡动画：

简单的背景动画：

无动画：

禁用状态（disabled）：

不男不女 不男不女

<!--简单的过渡动画：-->
<label class="bui-switch-label bui-switch-anim">
    <input type="checkbox" name="s"/><i class="bui-switch"></i>
</label>
<label class="bui-switch-label bui-switch-anim">
    <input type="checkbox" checked="" name="s"/><i class="bui-switch"></i>
</label>
<!--简单的背景动画：-->
<label class="bui-switch-label bui-switch-animbg">
    <input type="checkbox" name="s"/><i class="bui-switch"></i>
</label>
<label class="bui-switch-label bui-switch-animbg">
    <input type="checkbox" checked="" name="s"/><i class="bui-switch"></i>
</label>
<!--无动画：-->
<label class="bui-switch-label ">
    <input type="checkbox" name="s"/><i class="bui-switch"></i>
</label>
<label class="bui-switch-label ">
    <input type="checkbox" checked="" name="s"/><i class="bui-switch"></i>
</label>
<!--禁用状态（disabled）：-->
<label class="bui-switch-label">
    <input type="checkbox" disabled="" name="sex"/><i class="bui-switch"></i> 不男不女
</label>
<label class="bui-switch-label">
    <input type="checkbox" checked="" disabled="" name="ddd"/><i class="bui-switch"></i> 不男不女
</label>