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>
1 answer
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
How to change top address bar color in mobile web browsers - CSS
Set CSS/HTML opacity - transparent background but not text
HTML list <ul> not showing items <li> on a new line
Resize / shrink top navigation menu bar on Scroll in Javascript
CSS @Media min-width and max-width use together
Scrollbar CSS design - change width, height, color on DIV
Trending questions
How to calculate inverse currency exchange rate ? How to add side by side rows in excel pivot table ? Remove or hide bottom navigation bar with buttons on Android How to change QWERTZ keyboard to QWERTY in Windows 10 ? Is PLS LCD display good ? Difference between PLS LCD and Amoled Man Month calculation - how many man days or man hours ? Samsung Galaxy A & F better than M series ? What's the difference ? Free email accounts with large or unlimited storage capacity Send crypto from Binance to Trust Wallet.How long does it take? Twitter account is suspended - What to do ? How to unsuspend it ?
How to calculate inverse currency exchange rate ? How to add side by side rows in excel pivot table ? Remove or hide bottom navigation bar with buttons on Android How to change QWERTZ keyboard to QWERTY in Windows 10 ? Is PLS LCD display good ? Difference between PLS LCD and Amoled Man Month calculation - how many man days or man hours ? Samsung Galaxy A & F better than M series ? What's the difference ? Free email accounts with large or unlimited storage capacity Send crypto from Binance to Trust Wallet.How long does it take? Twitter account is suspended - What to do ? How to unsuspend it ?
2024 AnswerTabsTermsContact us