1 years ago -   September 19, 2018
<!DOCTYPE html> <html> <head> <style> .toggle_switch { width: 60px; height: 20px; position: relative; display: inline-block; } .toggle_switch input {display:none;} .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 1px; top: -4px; background-color: white; -webkit-transition: .4s; transition: .4s; border:2px solid gray; } input:checked + .slider { background-color: #2196F3; } input:focus + .slider { box-shadow: 0 0 1px #2196F3; } input:checked + .slider:before { -webkit-transform: translateX(29px); -ms-transform: translateX(29px); transform: translateX(29px); border:2px solid #2196F3 } .slider { border-radius: 50px; } .slider:before { border-radius: 100%; } </style> </head> <body> <!------- this html code of switch toggle ----------> <label class="toggle_switch"> <input type="checkbox"> <span class="slider"></span> </label> <!------------ end of switch toggle ----------------> <!----------- this html code of switch ------> <label class="toggle_switch"> <input type="checkbox" checked=""> <span class="slider"></span> </label> <!------------ end of switch toggle ----------------> </body> </html>
<body> <!------- this html code of switch toggle ----------> <label class="toggle_switch"> <input type="checkbox"> <span class="slider"></span> </label> <!------------ end of switch toggle ----------------> <!----------- this html code of switch ------> <label class="toggle_switch"> <input type="checkbox" checked=""> <span class="slider"></span> </label> <!------------ end of switch toggle ----------------> </body>
.toggle_switch { width: 60px; height: 20px; position: relative; display: inline-block; }
.toggle_switch input {display:none;}
..slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; }
input:checked + .slider { background-color: #2196F3;}
input:focus + .slider { box-shadow: 0 0 1px #2196F3; }
.slider { border-radius: 50px; }
.slider:before { border-radius: 100%; }
.input:checked + .slider:before { -webkit-transform: translateX(28px); -ms-transform: translateX(28px); transform: translateX(28px); border:2px solid #2196F3 }
6 month ago by techifind
1 years ago by techifind
1 years ago by techifind