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:
See online demo and code
The Markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<div class="container"> <h5>A Demo of Materialize Switch</h5> <!-- Switch --> <div class="switch"> <label> I disagree <input type="checkbox"> <span class="lever"></span> I agree </label> </div> <h5>Checked Initially</h5> <div class="switch"> <label> No <input type="checkbox" checked> <span class="lever"></span> Yes </label> </div> </div> |
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):
See online demo and code
Use the following CSS and change the background color as you want (under the reference of Materialize CSS):
|
1 2 3 4 5 6 7 8 9 |
<style> .switch label input[type=checkbox]:checked + .lever:after { background-color: #827717; } </style> |
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:
See online demo and code
The CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
.switch label input[type=checkbox]:checked + .lever:after { background-color: #ff8a65; } .switch label .lever { content: ""; display: inline-block; position: relative; width: 36px; height: 14px; background-color: rgba(141, 110, 99, 0.8); border-radius: 15px; margin-right: 10px; -webkit-transition: background 0.3s ease; transition: background 0.3s ease; vertical-align: middle; margin: 0 16px; } |
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:
See online demo and code
The CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
.switch label input[type=checkbox]:checked + .lever:after { background-color: #18ffff; } .switch label .lever { content: ""; display: inline-block; position: relative; width: 36px; height: 14px; background-color: rgba(24, 255, 255, 0.4); border-radius: 15px; margin-right: 10px; -webkit-transition: background 0.3s ease; transition: background 0.3s ease; vertical-align: middle; margin: 0 16px; } .switch label .lever:after { background-color: #006064; -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } |
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:
See online demo and code
The CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
.switch label input[type=checkbox]:checked + .lever { background-color: #b39ddb; } .switch label input[type=checkbox]:checked + .lever:after { background-color: #311b92; } .switch label .lever { content: ""; display: inline-block; position: relative; width: 36px; height: 14px; background-color: rgba(69, 90, 100, 0.4); border-radius: 15px; margin-right: 10px; -webkit-transition: background 0.3s ease; transition: background 0.3s ease; vertical-align: middle; margin: 0 16px; } .switch label .lever:after { background-color: #455A64; -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } input[type=checkbox]:checked:not(:disabled) ~ .lever:active::before, input[type=checkbox]:checked:not(:disabled).tabbed:focus ~ .lever::before { -webkit-transform: scale(2.4); transform: scale(2.4); background-color: rgba(206, 147, 216, 0.4); } |
You should see the effect as the mouse is clicked on the switch.