Refresh

This website www.cssscript.com/demo/custom-checkbox-radio-inputs-pure-css/dist/checkbox_radio_bootstrap.html is currently offline. Cloudflare's Always Online™ shows a snapshot of this web page from the Internet Archive's Wayback Machine. To check for the live version, click Refresh.

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>