CSS/HTML: Switch with input

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .switch { position: relative; display: inline-block; width: 60px; height: 25px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #dfdfdf; -webkit-transition: .1s; transition: .1s; border: 1px solid #000; border-radius: 5px; } .slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 4px; bottom: 3px; background-color: white; -webkit-transition: .1s; transition: .1s; } input:checked + .slider { background-color: #2196F3; } input:focus + .slider { box-shadow: 0 0 1px #2196F3; } input:checked + .slider:before { -webkit-transform: translateX(32px); -ms-transform: translateX(32px); transform: translateX(32px); } /* Rounded sliders */ .slider.round { border-radius: 5px; } .slider.round:before { border-radius: 50%; } </style> </head> <body> <h2>Toggle Switch</h2> <label class="switch"> <input type="checkbox"> <span class="slider"></span> </label> <label class="switch"> <input type="checkbox" checked> <span class="slider"></span> </label><br><br> <label class="switch"> <input type="checkbox"> <span class="slider round"></span> </label> <label class="switch"> <input type="checkbox" checked> <span class="slider round"></span> </label> </body> </html>
Create a simple switch component on/off

Be the first to comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.