slide toggle over a long switch

3 posts in this topic



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)



        <!DOCTYPE html>

	.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%;
	<body bgcolor='teal'>
	<h2>Toggle Switch</h2>

	<label class="switch">
	  <input type="checkbox">
	  <div class="slider"> Tekst</div>



So anyone any suggestions how to slide the toggle over the entire switch?



Share this post

Link to post
Share on other sites

You have to amend tranform: translate(); also, it at the moment only moves the box 26px to right.

1 person likes this

Share this post

Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now