How to Create a Toggle Switch in CSS3

You’ll find mobile-interface-like toggle switches in various places around the web but I wanted to improve existing examples.

toggle switch

Specifically, I wanted a solution which:

progressively enhanced standard checkboxes
did not use superfluous HTML tags or attributes
supported input labels
used only CSS without images or JavaScript
used relative units so the controls are resizable/responsive
had some slick animation
ideally worked in a range of mobile browsers, and
degraded gracefully so it remained usable in all browsers

View the demonstration page and the HTML/CSS code…

The HTML

We require a input checkbox and a label:

<div>
	<input type="checkbox" id="switch1" name="switch1" class="switch" />
	<label for="switch1">first switch</label>
</div>

The input has a class of “switch” assigned. This ensures we can retain normal checkboxes should we need them.

HTML purists will be horrified to see a wrapper div but it’s only necessary if you require two or more toggle switches — you cannot have more than one switch (or further labels) in the the same parent container. Besides, you’ll probably need div wrappers to separate form elements anyway.

The HTML will render well in most browsers with minimal styling. IE6, 7 and 8 users will see this:

toggle switch

The CSS

Now for the interesting part. First, we’ll hide the input box using a negative margin — this can be preferable to display:none which often disables it on mobile devices:

input.switch:empty
{
	margin-left: -999px;
}

You may have seen the :empty selector used in my recent post, How to Create a Responsive Centered Image in CSS3. It only matches elements which have no children but, since it’s not supported in IE8 and below, those browsers won’t attempt to apply the styles.

Next, we’ll style the sibling labels of the input checkbox:

input.switch:empty ~ label
{
	position: relative;
	float: left;
	line-height: 1.6em;
	text-indent: 4em;
	margin: 0.2em 0;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

The main properties to note are position:relative, the text-indent which provides room for our switch, and the line-height which defines its height.

The toggle itself is created using :before and :after pseudo-elements for the colored background and the white switch accordingly:

both elements are absolutely positioned at the left-hand edge of our label
the white switch is set to a smaller size and has a left margin applied to align it on the background
a border-radius and inset box-shadow is applied to give some depth, and
a transition is defined for the animation.

input.switch:empty ~ label:before, 
input.switch:empty ~ label:after
{
	position: absolute;
	display: block;
	top: 0;
	bottom: 0;
	left: 0;
	content: ' ';
	width: 3.6em;
	background-color: #c33;
	border-radius: 0.3em;
	box-shadow: inset 0 0.2em 0 rgba(0,0,0,0.3);
	-webkit-transition: all 100ms ease-in;
	transition: all 100ms ease-in;
}

input.switch:empty ~ label:after
{
	width: 1.4em;
	top: 0.1em;
	bottom: 0.1em;
	margin-left: 0.1em;
	background-color: #fff;
	border-radius: 0.15em;
	box-shadow: inset 0 -0.2em 0 rgba(0,0,0,0.2);
}

Finally, when the checkbox is checked, we move the switch to the right-hand edge and change the background color:

input.switch:checked ~ label:before
{
	background-color: #393;
}

input.switch:checked ~ label:after
{
	margin-left: 2em;
}

View the demonstration page and the HTML/CSS code…

Everyone likes a toggle switch! Please use the code however you like. A link back to this article or a “hey Craig, that’s awesome/awful” tweet is appreciated.

Frequently Asked Questions about CSS3 Toggle Switch

How can I create a CSS3 toggle switch without using JavaScript?

Creating a CSS3 toggle switch without JavaScript is possible and quite simple. You can use the HTML input element of type checkbox and style it using CSS. The key is to use the :checked pseudo-class to change the appearance of the switch when it’s toggled. You can also use the adjacent sibling combinator (+) to style the label that follows the checkbox. This way, you can create a visually appealing toggle switch with pure CSS.

Can I customize the colors of my CSS3 toggle switch?

Absolutely! You can customize the colors of your CSS3 toggle switch using CSS properties. You can change the background color of the switch, the color of the toggle, and even the color when the switch is checked. You can use any valid CSS color value, such as hexadecimal, RGB, or named colors.

How can I add transitions to my CSS3 toggle switch?

Adding transitions to your CSS3 toggle switch can make it look smoother and more professional. You can use the CSS transition property to animate the changes in properties over a specified duration. For example, you can animate the movement of the toggle or the change in background color when the switch is checked.

Is it possible to create a round CSS3 toggle switch?

Yes, it is possible to create a round CSS3 toggle switch. You can use the border-radius property to make the corners of the switch and the toggle round. By setting the border-radius to 50%, you can create a perfect circle.

How can I make my CSS3 toggle switch accessible?

Making your CSS3 toggle switch accessible is crucial for usability. You can use the aria-checked attribute to indicate the state of the switch to assistive technologies. You can also use the :focus pseudo-class to add a visual indication when the switch is focused.

Can I use CSS3 toggle switches on mobile devices?

Yes, CSS3 toggle switches work on mobile devices. They are a great way to provide a familiar interface element for users. However, you should ensure that the switch is large enough to be easily tapped on a touchscreen.

How can I add labels to my CSS3 toggle switch?

You can add labels to your CSS3 toggle switch using the HTML label element. The label should be associated with the checkbox input by using the for attribute. This improves accessibility and allows the user to click on the label to toggle the switch.

Can I create a CSS3 toggle switch with multiple states?

While a basic CSS3 toggle switch has two states (checked and unchecked), it is possible to create a switch with more than two states. However, this requires a more complex setup and may involve using additional HTML elements and CSS styles.

How can I add a CSS3 toggle switch to my form?

You can add a CSS3 toggle switch to your form just like any other form input. The value of the checkbox input will be submitted with the form. You can use the :checked pseudo-class to determine the state of the switch in your CSS.

Can I use CSS3 toggle switches with frameworks like Bootstrap?

Yes, you can use CSS3 toggle switches with frameworks like Bootstrap. However, you may need to override some of the default styles to make your toggle switch look the way you want. You can do this by adding your own CSS rules after the framework’s CSS.