settings

Checkboxes

bookmark

Use checkboxes when looking for yes or no answers. The forattribute is necessary to bind our custom checkbox with the input. Add the input's idas the value of the forattribute of the label.

Basic

$(function() {    // set intermidiate style    $('#indeterminate-checkbox').prop('indeterminate', true);});
Custom Colors

You can easily make your own checkbox color by creating a custom CSS class. Take a look at the example below where we add a checkbox red color.

<p>    <label>        <input type="checkbox" checked="checked" class="red"/>        <span>Basic checked style</span>    </label></p><p>    <label>        <input type="checkbox" class="filled-in red" checked="checked" />        <span>Filled in checked style</span>    </label></p>
[type="checkbox"].red:checked+span:not(.lever):before {    border-right: 2px solid #f44336;    border-bottom: 2px solid #f44336;}[type="checkbox"].red:indeterminate+span:not(.lever):before {    border-right: 2px solid #f44336;}[type="checkbox"].filled-in.red:checked+span:not(.lever):after {    border: 2px solid #f44336;    background-color: #f44336;}[type="checkbox"].filled-in.tabbed.red:checked:focus+span:not(.lever):after {    background-color: #f44336;    border-color: #f44336;}[type="checkbox"].filled-in.red:checked+span:not(.lever):before {    border-top: 2px solid transparent;    border-left: 2px solid transparent;    border-right: 2px solid #fff;    border-bottom: 2px solid #fff;}