The Switch in Materialize CSS

The switches enable the visitors to select a value from the two available options. For example, Yes or No, Agree or Disagree etc.

Generally, the switches are created by using the checkboxes in web forms. In Materialize CSS framework, a toggle/switch is also created by using a checkbox where switch class is assigned to the wrapper element and text to display in the switch is assigned in the label and span tags.

The default switch created is of green color with effects by using CSS/CSS3. You may also override the existing CSS and apply your own style in various states of a switch.

See the following examples with default and custom Materialize switches with complete markup and CSS.

The example of default switch

The first example shows creating a switch by using the “switch” class in the wrapper div with the input type = “checkbox”. The other required class is “lever” that is used in the <span> tag as follows:

materialize switch

See online demo and code

The Markup:

Changing the switch circle color example

The following example overrides the default color of the circle in the switch. See the CSS below or in the example page’s code section (under <style> tag):

switch circle

See online demo and code

Use the following CSS and change the background color as you want (under the reference of Materialize CSS):

Change the lever color example

The following example shows how to change the lever color in the unchecked state along with color in the checked state. Again, see the <style> section in the example page for the overridden CSS:

switch lever

See online demo and code

The CSS:

Modify the circle color in unchecked state example

You may also change the circle color in the unchecked state of the switch. The following example shows modified colors for the unchecked, checked along with lever colors:

switch unchecked

See online demo and code

The CSS:

Get the complete code from the demo page.

How to override the touch effect color

As you press the switch, there is an effect created with the bigger circle by using CSS3 properties. The following example shows how to change it in the checked state.

Besides, the lever color in the checked state is also changed in this example. Have a look:

switch effect

See online demo and code

The CSS:

You should see the effect as the mouse is clicked on the switch.