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:19 | gstlouis |