DEV Community

Let's create a custom toggle switch using HTML and CSS.

Gaurav on March 05, 2021

Hello everyone! In this quick tutorial, let's learn how to create a custom toggle switch using HTML and CSS. Step 1 - The HTML. <...

Read full post

Matias Borgeaud • Mar 6 '21

Great tip!
I just did a small change to the CSS to give a transition effect to both the tick and the cross.

.toggle-thumb {
 ...
 overflow: hidden;
}
svg:nth-child(1) {
  position: relative;
  left: -26px;    
}
svg {
  transition: .4s all ease;
}
.checkbox:checked + .toggle-thumb > svg {
  transform: translateX(26px);
}

Gaurav • Mar 6 '21

Hey! This looks amazing😍🤩 Thank u so much!

Bill Gouveros • Mar 6 '21

Nice quick tut! Since it's aimed to beginners, it would also benefit from a quick explanation of why clicking the also influences the invisible checkbox.

Gaurav • Mar 6 '21

Oh yea I actually forgot to add that 😅 Thanks for the suggestion

Francis Provost • Mar 10 '21

Really nice! I love that you used :checked instead of using some JS.

Don't forget to make it accessible to screen readers.
For that I would replace the label by a span. The input would be labelled somewhere else in the form. I would add aria-hidden on the span. That way screen readers will ignore the svgs that are not important for to understand the input.

Gaurav • Mar 10 '21

Hey, thanks! I will surely make these changes.😄

Matyi Csorba • Mar 6 '21

Cool example. I love these pure css solutions.
Here's mine
codepen.io/Tyutyesz/pen/VwvNbbZ

Gaurav • Mar 7 '21

Looks nice. clean and minimal

Anass Boutaline • Mar 7 '21

Great article, i never tried to use css do that, alwayse use js to trigger an event, but css seems to be more accurate, thanks

Gaurav • Mar 7 '21

Thanks!

jim shtepa • Mar 12 '21

I am wondering if you could suggest basic integration to, for example, switching themes? What would be the best approach?

Gaurav • Mar 12 '21 • Edited

Yes, we can use this toggle to switch themes using javascript. We will have to add an event listener on the checkbox to listen for the 'change' event and create a function that toggles the theme on the body. First, you have to define your dark-mode class in your CSS and the javascript will look something like this,

const checkBox = document.getElementsByClassName("checkbox");
const body = document.body;

checkbox.addEventListener("change", darkMode);

function darkMode() {
      body.classList.toggle("dark-mode")
}

jim shtepa • Mar 12 '21

Is there any reason not using .checkbox {display:none} instead of .checkbox {
opacity: 0;
width: 0;
height: 0;
}?

great material and presentation. thank you!

Gaurav • Mar 12 '21

Hey, thank u so much for pointing that out. It's actually my fault😅 I was trying different things to hide that checkbox to see what works best (like display: none, height:0 width:0, opacity:0, etc), and by mistake, I forgot to remove the extra code when writing this article😅display: none also works!.