Basic
$(function() { // set intermidiate style $('#indeterminate-checkbox').prop('indeterminate', true);});
Use checkboxes when looking for yes or no answers. The for
attribute is necessary to bind our custom checkbox with the input. Add the input's id
as the value of the for
attribute of the label.
$(function() { // set intermidiate style $('#indeterminate-checkbox').prop('indeterminate', true);});
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;}