answersAnswerTabs
 Ask question

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
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
How to add side by side rows in excel pivot table ?
Free email accounts with large or unlimited storage capacity
Does LTE mean 4G ? Difference between LTE and 4G
Check if value exists in column more than once or twice - Excel
What is definition of ROA, ROI, ROE, ROS, EBITDA in finance ?
Man Month calculation - how many man days or man hours ?
What is good PPI of smartphone display ? How to calculate it ?
Follow us on Facebook
2022 AnswerTabsTermsContact us