The checkbox in Materialize CSS

The Materialize has built-in support for creating nicely styled checkboxes in your web forms. The standard HTML checkboxes are plain and boring with a simple black border in unchecked and with a tick mark in checked states.

Using Materialize, the border style is changed along with tick mark color. You may also use a built-in class for creating the filled checkbox. Using disabled attribute also creates different looking checkbox than the standard one. I will also show you how to override the default colors for creating custom style checkboxes in this tutorial.

An example of checked and unchecked state checkboxes

For creating a checkbox with the default style, you do not require referring any CSS class in the <input type=”checkbox”>. This markup automatically styles the checkbox with Materialize CSS.

However, for binding the custom checkbox with input, you are required to use the id of the checkbox as the value for the “for” attribute of the <label> tag.

Have a look at the demo with checked and unchecked states of the checkboxes:

materialize checkbox

See online demo and code

The markup:

A demo of filled-in style checkbox

For creating the checkbox that is filled with a color in the checked state, use the filled-in class in the <input> tag for the checkbox.

See an example with code and output below:

materialize checkbox filled

See online demo and code

The code with filled-in class:

Customizing the border and background colors for filled checkbox

In real time web application based on materialize CSS, you may require changing the default colors for the checkbox filled style for matching with the rest of the form or website theme.

For modifying the fill color for border and background, you may override the filled-in class as shown in the example below with CSS code:

materialize checkbox custom fill

See online demo and code

The CSS:

Note: Must place this CSS after the reference to the materialize CSS file for overriding the default properties. After that, you may use your own colors and set other properties for customization.

Creating disabled checkboxes example

Create the disabled checkboxes for both checked and unchecked states with default grayish color by using the disabled=”disabled” attribute. Have a look:

checkbox disabled

See online demo and code

The Code:

Changing the border of unchecked state example

In above section, I have shown changing the fill color by overriding the filled-in class. If you want to change the border color of unchecked checkbox then this is how it can be done. See the CSS in the <style> section of the demo page or below:

checkbox unchcked border

See online demo and code

The CSS for 1px border and indigo color:

You can see 1px border for the unchecked state.