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
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 change QWERTZ keyboard to QWERTY in Windows 10 ? How to add side by side rows in excel pivot table ? How to calculate inverse currency exchange rate ? Is PLS LCD display good ? Difference between PLS LCD and Amoled Remove or hide bottom navigation bar with buttons on Android Samsung Galaxy A & F better than M series ? What's the difference ? Man Month calculation - how many man days or man hours ? What is the meaning of running sushi ? How does running sushi work ? Can EU citizens enter UK with national ID card - without passport ? Change QWERTZ keyboard to QWERTY in Windows 11 - switch layout
How to change QWERTZ keyboard to QWERTY in Windows 10 ? How to add side by side rows in excel pivot table ? How to calculate inverse currency exchange rate ? Is PLS LCD display good ? Difference between PLS LCD and Amoled Remove or hide bottom navigation bar with buttons on Android Samsung Galaxy A & F better than M series ? What's the difference ? Man Month calculation - how many man days or man hours ? What is the meaning of running sushi ? How does running sushi work ? Can EU citizens enter UK with national ID card - without passport ? Change QWERTZ keyboard to QWERTY in Windows 11 - switch layout
2024 AnswerTabsTermsContact us