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 ?
20 Apr 2020 at 05:38 PM
0give a positive ratinggive a negative ratingshow more
onefiveonefive
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.

css html create toggle slider button from input checkbox

<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>
03 May 2020 at 03:47 PM
0give a positive ratinggive a negative ratingshow more
TimTim
Share on FacebookShare on TwitterShare on LinkedInSend email
Follow us on Facebook
2022 AnswerTabsTermsContact us