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

jQuery之家 返回下载页
自定义Checkbox & Radio样式 Bootstrap样式 字体图标样式 图片样式

Checkbox & Radio custom style Bootstrap

Checkbox


<div class="checkbox">
    <label>
        <input type="checkbox" value="">
        <i class="fa fa-2x icon-checkbox"></i>
        Option one is this and that&mdash;be sure to include why it's great
    </label>
</div>
<div class="checkbox">
    <label>
        <input type="checkbox" value="" checked>
        <i class="fa fa-2x icon-checkbox"></i>
        Option one is this and that&mdash;be sure to include why it's great
    </label>
</div>
<div class="checkbox disabled">
    <label>
        <input type="checkbox" value="" disabled>
        <i class="fa fa-2x icon-checkbox"></i>
        Option is disabled
    </label>
</div>
<div class="checkbox disabled">
    <label>
        <input type="checkbox" value="" disabled checked>
        <i class="fa fa-2x icon-checkbox"></i>
        Option is disabled & checked
    </label>
</div>

Radio


<div class="radio">
    <label>
        <input type="radio" name="optionsRadios" checked>
        <i class="fa fa-2x icon-radio"></i>
        Option one is this and that&mdash;be sure to include why it's great
    </label>
</div>
<div class="radio">
    <label>
        <input type="radio" name="optionsRadios">
        <i class="fa fa-2x icon-radio"></i>
        Option two can be something else and selecting it will deselect option one
    </label>
</div>
<div class="radio disabled">
    <label>
        <input type="radio" name="optionsRadios" disabled>
        <i class="fa fa-2x icon-radio"></i>
        Option three is disabled
    </label>
</div>
<div class="radio disabled">
    <label>
        <input type="radio" name="optionsRadios" disabled checked>
        <i class="fa fa-2x icon-radio"></i>
        Option is disabled & checked
    </label>
</div>

Checkbox xs


<div class="checkbox checkbox-xs">
    <label>
        <input type="checkbox" value="">
        <i class="fa fa-lg icon-checkbox"></i>
        Option one is this and that be sure to include why it's great
    </label>
</div>

Radio xs

<div class="radio radio-xs">
    <label>
        <input type="radio" name="optionsRadios" checked>
        <i class="fa fa-lg icon-radio"></i>
        Option one is this and that be sure to include why it's great
    </label>
</div>

Checkbox - Radio indent


<div class="radio indent">
    <label>
        <input type="radio" name="optionsRadios" checked>
        <i class="fa fa-2x icon-radio"></i>
        Option one is this and that be sure to include why it's great
    </label>
</div>

Checkbox-xs - Radio-xs indent


<div class="radio radio-xs indent">
    <label>
        <input type="radio" name="optionsRadios" checked>
        <i class="fa fa-lg icon-radio"></i>
        Option one is this and that be sure to include why it's great
    </label>
</div>