Balderick Posted March 1, 2017 Share Posted March 1, 2017 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? Link to comment Share on other sites More sharing options...
dsonesuk Posted March 1, 2017 Share Posted March 1, 2017 You have to amend tranform: translate(); also, it at the moment only moves the box 26px to right. 1 Link to comment Share on other sites More sharing options...
Balderick Posted March 1, 2017 Author Share Posted March 1, 2017 yes, thank you dsonesuk that worked very well. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now