Balderick

slide toggle over a long switch

3 posts in this topic

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?

 

 

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