custom toggle switch

Subject:

<!DOCTYPE html><html><head><style>.switch {  position: relative;  display: inline-block;  width: 60px;  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>

<h2>Toggle Switch</h2>

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

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

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

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

</body></html> 

2017-01-29 21:53:19gstlouis