默认

<div class="mui-checkbox-con">
    <label>
        <input class="mui-checkbox" type="checkbox">默认未选中</label>
</div>
<div class="mui-checkbox-con">
    <label>
        <input class="mui-checkbox" type="checkbox" checked>默认选中</label>
</div>
<div class="mui-checkbox-con">
    <label>
        <input class="mui-checkbox checkbox-orange" type="checkbox" checked>橘黄色 checkbox-orange</label>
</div>
<div class="mui-checkbox-con">
    <label>
        <input class="mui-checkbox checkbox-green" type="checkbox" checked>绿色 checkbox-green</label>
</div>
<div class="mui-checkbox-con">
    <label>
        <input class="mui-checkbox" type="checkbox" disabled>禁用</label>
</div>

背景过渡效果的checkbox

增加 mui-checkbox-anim类;

border等其他属性不做过渡效果，目的是增加视觉差，更有动画效果

<div class="mui-checkbox-con">
    <label>
        <input class="mui-checkbox mui-checkbox-anim" type="checkbox">默认未选中</label>
</div>
<div class="mui-checkbox-con">
    <label>
        <input class="mui-checkbox mui-checkbox-anim" type="checkbox" checked>默认选中</label>
</div>
<div class="mui-checkbox-con">
    <label>
        <input class="mui-checkbox mui-checkbox-anim checkbox-orange" type="checkbox" checked>橘黄色 checkbox
        -orange</label>
</div>
<div class="mui-checkbox-con">
    <label>
        <input class="mui-checkbox mui-checkbox-anim checkbox-green" type="checkbox" checked>绿色 checkbox-green</label>
</div>
<div class="mui-checkbox-con">
    <label>
        <input class="mui-checkbox mui-checkbox-anim" type="checkbox" disabled>禁用</label>
</div>

小的复选框

<div class="mui-checkbox-con">
    <label>
        <input class="mui-checkbox checkbox-s" type="checkbox">默认未选中</label>
</div>
<div class="mui-checkbox-con">
    <label>
        <input class="mui-checkbox checkbox-s" type="checkbox" checked>默认选中</label>
</div>
<div class="mui-checkbox-con">
    <label>
        <input class="mui-checkbox checkbox-s checkbox-orange" type="checkbox" checked>橘黄色 checkbox-orange</label>
</div>
<div class="mui-checkbox-con">
    <label>
        <input class="mui-checkbox checkbox-s checkbox-green" type="checkbox" checked>绿色
        checkbox-green</label>
</div>
<div class="mui-checkbox-con">
    <label>
        <input class="mui-checkbox checkbox-green checkbox-s" type="checkbox" disabled>绿色 禁用</label>
</div>
<div class="mui-checkbox-con">
    <label>
        <input class="mui-checkbox checkbox-s" type="checkbox" disabled>禁用</label>
</div>