Materialize CSS Switches
Materialize provides switches to allow the viewer to select an option between the two available. Generally, switches are special checkboxes used for binary states such as on/off or yes/no or agree/disagree.
Switches can be created by using the “switch” class inside the wrapper div with the input type = “checkbox”. The other required class is “lever” that is used in the <span> tag. Switches can be modified according to ones choice by adding CSS elements. Here is the basic view of switch.
Example:
<!DOCTYPE html><html> <head> <!--Import Google Icon Font--> <link href= rel="stylesheet" /> <!-- Compiled and minified CSS --> <link rel="stylesheet" href= <script type="text/javascript" src= <script src= </script> <!--Let browser know website is optimized for mobile--> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> </head> <body class="container"> <div class="center"> <h3>Switches in materialize</h3> </div> <div class="card-panel green-text"> <h4 class="center">Switch</h4> <!-- Switch --> <div class="switch"> <label> Off <input type="checkbox" /> <span class="lever"></span> On </label> </div> <br /> <div class="switch"> <label> No <input type="checkbox" /> <span class="lever"></span> Yes </label> </div> <br /> <div class="switch"> <label> Disagree <input type="checkbox" /> <span class="lever"></span> Agree </label> </div> </div> <div class="card-panel green-text"> <h4 class="center">Disabled Switch</h4> <div class="switch"> <label> Off <input disabled type="checkbox" /> <span class="lever"></span> On </label> </div> <br /> <div class="switch"> <label> No <input disabled type="checkbox" /> <span class="lever"></span> Yes </label> </div> <br /> <div class="switch"> <label> Disagree <input disabled type="checkbox" /> <span class="lever"></span> Agree </label> </div> </div> <!-- Disabled Switch --> <!-- Compiled and minified JavaScript --> <script src= </script> </body></html> |
Output:
