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

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

Checkbox & Radio custom style CSS

Checkbox

Default
Checked
Disabled
Disabled & Checked

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

Radio

Default
Checked
Disabled
Disabled & Checked

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

Checkbox xs

Default
Checked
Disabled
Disabled & Checked

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

Radio xs

Default Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur distinctio eum ipsum soluta dignissimos minima maxime sapiente cupiditate pariatur exercitationem, excepturi alias dolore veritatis in eligendi consectetur voluptates, enim unde!
Checked Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores tempora totam, perferendis aut assumenda maxime sequi maiores voluptatum similique a reprehenderit accusantium aperiam recusandae accusamus provident laborum quisquam blanditiis itaque?
Disabled
Disabled & Checked

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

Checkbox - Radio indent

Checked Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur minima suscipit, veritatis. Veniam odit cum repudiandae. Ad, aliquid culpa praesentium sed voluptatem, placeat sapiente, quas sit, dolorem magni saepe quasi. Checked Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur minima suscipit, veritatis. Veniam odit cum repudiandae. Ad, aliquid culpa praesentium sed voluptatem, placeat sapiente, quas sit, dolorem magni saepe quasi.

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

Checkbox-xs - Radio-xs indent

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