A simple Switch using only HTML and CSS

Introduction

A Switch is a simple component that allows users to toggle between two states. It is often used in forms, settings, and other interactive elements. In this article, we will create a simple switch using only HTML and CSS. No JavaScript, no images, no external libraries.

The basic structure

As the switch is a UI element that can be toggled, so it is either on or off, we can use a checkbox input to represent the switch. This also allows us to use the checked attribute to set the initial state of the switch. Also we will be able to use the checkbox :checked selector to style the switch. Another benefit of using a checkbox input is, that it is by default accessible and can be toggled by clicking on the label and by using the space and enter keys.

<input type="checkbox" id="switch" class="switch" />

The styling

First of all we need the background of the switch. This will be the main container of the switch and will be styled using the appearance-none property to remove the default browser styles. The rest of the styles are pretty self-explanatory. We set the display to flex, to align the items in the center. We also set the width, height, border-radius, background-color, cursor and transition, because we want to animate the background color later on.

.switch {
  appearance: none;
  position: relative;
  display: flex;
  align-items: center;
  width: 3rem;
  height: 1.75rem;
  border-radius: 1rem;
  background-color: gray;
  cursor: pointer;
  transition: background-color 0.5s ease-out;
}

Now that we have the background of the switch, we need to create the thumb of the switch. This will be the small circle that moves inside the switch. We will do this by adding a before pseudo-element to the switch and style it with the content property. The width and height of the thumb in combination with the border-radius will create a perfect circle. We also make sure to include the transition property, so that we can animate the movement of the thumb.

.switch:before {
  content: '';
  display: block;
  border-radius: 100%;
  width: 1.25rem;
  height: 1.25rem;
  background-color: white;
  transform: translateX(0.25rem);
  transition: transform 0.5s ease-out;
}

Next we need to style the background and the thumb of the switch when it is checked. This will be the state when the checkbox input is checked. Let's move the thumb first, when the input is checked. We will utilize the transform property to move the thumb to the right.

.switch:checked:before {
  transform: translateX(1.375rem);
}

We also want to change the background color of the switch when it is checked. We will do this by using the :checked selector and set the background-color property.

.switch:checked {
  background-color: green;
}

Almost done, the last bit of styling that we need to add is the focus and ring styles. We will use the :focus-visible selector to style the switch when it is focused via keyboard. And we set the focus color to transparent as we don't need the visual feedback for click mouse or touch screen events.

.switch:focus {
  outline-color: transparent;
}

.switch:focus-visible {
  outline: 2px solid lightblue;
  outline-offset: 0px;
}

If we put all of this together, and use nested css rules, this is the result:

.switch {
  appearance: none;
  position: relative;
  display: flex;
  align-items: center;
  width: 3rem;
  height: 1.75rem;
  border-radius: 1rem;
  background-color: gray;
  cursor: pointer;
  transition: background-color 0.5s ease-out;

  &:checked {
    background-color: green;

    &:before {
      transform: translateX(1.375rem);
    }
  }

  &:before {
    content: '';
    display: block;
    border-radius: 100%;
    width: 1.25rem;
    height: 1.25rem;
    background-color: white;
    transform: translateX(0.25rem);
    transition: transform 0.5s ease-out;
  }

  &:focus {
    outline-color: transparent;
  }

  &:focus-visible {
    outline: 2px solid lightblue;
    outline-offset: 0px;
  }
}

If you prefer using TailwindCSS, you can use the following code to create the switch:

<input
  type="checkbox"
  id="switch"
  class="focus-visible:ring-light-blue-300 relative flex h-7 w-12 cursor-pointer appearance-none items-center rounded-full border border-black bg-gray-500 transition-colors duration-500 ease-out before:absolute before:left-1 before:h-5 before:w-5 before:rounded-full before:bg-white before:transition-transform before:duration-500 before:ease-out before:content-[''] checked:bg-green-500 checked:before:translate-x-[1.125rem] focus:outline-none focus-visible:ring-2"
/>

The final result

If we put all the pieces together, we get the following result:

Feel free to play around with the switch and change the styles to your liking.

Conclusion

In this article, we have created a simple switch using only HTML and CSS. We have used a checkbox input to represent the switch and styled it with CSS. We have also used the :checked selector to style the switch when it is checked. This is a simple and accessible way to create a switch.