Did you had a problem customizing html checkboxes and radio buttons? icheck-bootstrap is pure css solution for displaying twitter bootstrap style checkboxes and radio buttons. Try Demo.

You may also like to try icheck-material.
Love cool tech? Check out CoolTechUnder.com

• Getting started
• HTML syntax
• ASP.NET MVC syntax
• Color schemes
• License

Several quick start options are available:

• Download the latest release
• Install with Bower: bower install icheck-bootstrap
• Install with npm: npm install icheck-bootstrap
• Install with Nuget: Install-Package icheck-bootstrap
• Use CDN jsDelivr
• Use CDN cdnjs

<div class="icheck-primary">
    <input type="checkbox" id="someCheckboxId" />
    <label for="someCheckboxId">Click to check</label>
</div>

<div class="icheck-primary">
    <input type="radio" id="someRadioId1" name="someGroupName" />
    <label for="someRadioId1">Option 1</label>
</div>
<div class="icheck-primary">
    <input type="radio" id="someRadioId2" name="someGroupName" />
    <label for="someRadioId2">Option 2</label>
</div>

To have checkboxes or radio buttons inline use .icheck-inline class

<div class="icheck-primary icheck-inline">
    <input type="checkbox" id="chb1" />
    <label for="chb1">Label 1</label>
</div>
<div class="icheck-primary icheck-inline">
    <input type="checkbox" id="chb2" />
    <label for="chb2">Label 2</label>
</div>

Use disabled attribute on your input (checkbox or radio) to have disabled style.

To have components without label, you still have to have label control with empty text.

<div class="icheck-primary">
    <input type="checkbox" id="someCheckboxId" />
    <label for="someCheckboxId"></label>
</div>

<div class="icheck-primary">
    @Html.CheckBoxFor(m => m.SomeProperty, new { id = "someCheckboxId" })
    <label for="someCheckboxId">Click to check</label>
</div>

<div class="icheck-primary">
    @Html.RadioButtonFor(m => m.SomeProperty, SomeValue1, new { id = "someRadioId1" }) 
    <label for="someRadioId1">Option 1</label>
</div>
<div class="icheck-primary">
    @Html.RadioButtonFor(m => m.SomeProperty, SomeValue2, new { id = "someRadioId2" })
    <label for="someRadioId2">Option 2</label>
</div>

Try Demo

Twitter Bootstrap: As you can see in previous examples, icheck-primary class used for styling. You can use following classes for Twitter Bootstrap color scheme:

.icheck-default
.icheck-primary
.icheck-success
.icheck-info
.icheck-warning
.icheck-danger

Flat UI Colors: Also you can use one of the really nice colors from flatuicolors.com

.icheck-turquoise
.icheck-emerland
.icheck-peterriver
.icheck-amethyst
.icheck-wetasphalt
.icheck-greensea
.icheck-nephritis
.icheck-belizehole
.icheck-wisteria
.icheck-midnightblue
.icheck-sunflower
.icheck-carrot
.icheck-alizarin
.icheck-clouds
.icheck-concrete
.icheck-orange
.icheck-pumpkin
.icheck-pomegranate
.icheck-silver
.icheck-asbestos

To build this CSS from SCSS files, use the following script :

npm run build

By using the SCSS files you can easily customize your icheck size and colors.

To customize the easiest way is to load icheck as a module by using the @use rule.

@use "./node_modules/icheck-bootstrap/scss/icheck-bootstrap" with (
    $size: 27px,
    $custom-colors: (
      'success': #FFFF00 #FF0000 #00FF00,
      'mycolor': #FF0000,
    )
)

As you can see in this example, size of checkboxes and radio buttons will be 27px (instead of the default 22px). success color is overwritten and mycolor is added, you can now use "icheck-mycolor" as a class.

If you watch the example above, colors are defined with one, two or three values separated by a space and in this order

• border color
• background color
• checkmark color

If only one value is set, this value is used for border and background color, the checkmark will use the default color.

If only two values are set, the checkmark will use the default color.

icheck-bootstrap released under the MIT license. Feel free to use it in personal and commercial projects.