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
How to change top address bar color in mobile web browsers - CSS
Resize / shrink top navigation menu bar on Scroll in Javascript
HTML list <ul> not showing items <li> on a new line
CSS @Media min-width and max-width use together
Scrollbar CSS design - change width, height, color on DIV
Trending questions
Remove or hide bottom navigation bar with buttons on Android How to calculate inverse currency exchange rate ? Man Month calculation - how many man days or man hours ? How to add side by side rows in excel pivot table ? How to change QWERTZ keyboard to QWERTY in Windows 10 ? How to calculate how many Man Days are 3 Man Hours ? Samsung Galaxy A & F better than M series ? What's the difference ? Is PLS LCD display good ? Difference between PLS LCD and Amoled Difference between Standard and Vivid screen mode on Android How to create a Favicon with transparent background ?
Remove or hide bottom navigation bar with buttons on Android How to calculate inverse currency exchange rate ? Man Month calculation - how many man days or man hours ? How to add side by side rows in excel pivot table ? How to change QWERTZ keyboard to QWERTY in Windows 10 ? How to calculate how many Man Days are 3 Man Hours ? Samsung Galaxy A & F better than M series ? What's the difference ? Is PLS LCD display good ? Difference between PLS LCD and Amoled Difference between Standard and Vivid screen mode on Android How to create a Favicon with transparent background ?
Find us on Facebook
2023 AnswerTabsTermsContact us