兼容IE8的CSS Checkbox和Radio美化插件 Custom style checkbox & radio for web

自定义Checkbox & Radio样式 Bootstrap样式 字体图标样式 图片样式

Checkbox & Radio custom style CSS Font

Checkbox





<label class="checkbox">
    <input type="checkbox">
    <i class="fa fa-2x icon-checkbox"></i>
    Default
</label>
<br>
<label class="checkbox">
    <input type="checkbox" checked>
    <i class="fa fa-2x icon-checkbox"></i>
    Checked
</label>
<br>
<label class="checkbox disabled">
    <input type="checkbox" disabled>
    <i class="fa fa-2x icon-checkbox"></i>
    Disabled
</label>
<br>
<label class="checkbox disabled">
    <input type="checkbox" disabled checked>
    <i class="fa fa-2x icon-checkbox"></i>
    Disabled & Checked
</label>

Radio





<label class="radio">
    <input type="radio" name="group-radio">
    <i class="fa fa-2x icon-radio"></i>
    Default
</label>
<br>
<label class="radio">
    <input type="radio" name="group-radio" checked>
    <i class="fa fa-2x icon-radio"></i>
    Checked
</label>
<br>
<label class="radio disabled">
    <input type="radio" disabled>
    <i class="fa fa-2x icon-radio"></i>
    Disabled
</label>
<br>
<label class="radio disabled">
    <input type="radio" disabled checked>
    <i class="fa fa-2x icon-radio"></i>
    Disabled & Checked
</label>

Checkbox xs





<label class="checkbox checkbox-xs">
    <input type="checkbox">
    <i class="fa fa-lg icon-checkbox"></i>
    Default
</label>

Radio xs





<label class="radio radio-xs">
    <input type="radio" name="group-radio">
    <i class="fa fa-lg icon-radio"></i>
    Default
</label>

Checkbox - Radio indent


<label class="radio indent">
    <input type="radio" name="group-radio">
    <i class="fa fa-2x icon-radio"></i>
    Default
</label>

Checkbox-xs - Radio-xs indent


<label class="radio radio-xs indent">
    <input type="radio" name="group-radio">
    <i class="fa fa-lg icon-radio"></i>
    Default
</label>