How to change Checkbox to Toggle slider button using CSS ? | |||||||||||
| What should I do to create a toggle slider button from checkbox input using CSS ? Is the CSS toggle switch button supported in all web browsers ? | |||||||||||
| |||||||||||
| Hi, To change the checkbox into toggle slider by using CSS, you can use the solution below. It is based on HTML label, checkbox input field and span tag. CSS toggle switch works in recent versions of the most commonly used web browsers.  <style> .switch { position: relative; display: inline-block; width: 58px; height: 32px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #CCCCCC; -webkit-transition: .3s; transition: .3s; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 3px; bottom: 3px; background-color: #FFFFFF; -webkit-transition: .3s; transition: .3s; } input:checked + .slider { background-color: #368BD6; } input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } .slider { border-radius: 32px; } .slider:before { border-radius: 50%; } </style> <body> <label class="switch"> <input type="checkbox"> <span class="slider"></span> </label> </body> | |||||||||||
| |||||||||||
|
| |||||||||||
    | |||||||||||
| 2022 AnswerTabs | Terms | Contact us |
