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>
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>
Related questions
Different background color for Odd / Even table rows - CSS
CSS font-size units PX to PT, IN, EM, REM conversion
Smooth move of HTML elements - animation with CSS
Full screen Not Clickable overlapping layer / overlay - CSS
Set CSS/HTML opacity - transparent background but not text
Resize / shrink top navigation menu bar on Scroll in Javascript
HTML list <ul> not showing items <li> on a new line
Trending questions
Remove or hide bottom navigation bar with buttons on Android How to calculate inverse currency exchange rate ? How to add side by side rows in excel pivot table ? How to change QWERTZ keyboard to QWERTY in Windows 10 ? Best free attractions in London - free things to do in London Man Month calculation - how many man days or man hours ? How to calculate how many Man Days are 3 Man Hours ?
Remove or hide bottom navigation bar with buttons on Android How to calculate inverse currency exchange rate ? How to add side by side rows in excel pivot table ? How to change QWERTZ keyboard to QWERTY in Windows 10 ? Best free attractions in London - free things to do in London Man Month calculation - how many man days or man hours ? How to calculate how many Man Days are 3 Man Hours ?
Follow us on Facebook
2022 AnswerTabsTermsContact us