Search the Community
Showing results for tags 'csss'.
-
Hi I would like to customize a specific toggle slider. I managed to make the example larger, but now the toggle moves only a little and not across the entire switch. ( I set width to 160 in the .switch class) example: <!DOCTYPE html> <html> <head> <style> .switch { position: relative; display: inline-block; width: 160px; height: 34px; } .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: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } input:checked + .slider { background-color: #2196F3; } input:focus + .slider { box-shadow: 0 0 1px #2196F3; } input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } /* Rounded sliders */ .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } </style> </head> <body bgcolor='teal'> <center><br><br> <h2>Toggle Switch</h2> <label class="switch"> <input type="checkbox"> <div class="slider"> Tekst</div> </label> <br><br> </center> </body> </html> So anyone any suggestions how to slide the toggle over the entire switch?