Hostinicon
GET HOSTING FROM $3.95/MO PLUS A FREE YEAR ON TUTS+ (RRP $180). HURRY OFFER LIMITED. Check it out
Advertisement

Creating a JavaScript-Free Radio Toggle in CSS3

by
Gift

Get a free year on Tuts+ this month when you purchase a Siteground hosting plan from $3.95/mo

You'll often find yourself using toggle sliders as a trendy alternative to checkboxes. Today we'll be creating one using plain CSS3 and HTML.


Step 1: Begin With the Markup

Create a new HTML document and add a span tag with a class of toggle-bg. This will be the background area for the toggle.


Step 2: Semantics and Functionality

To make the toggle functional, we'll be using some invisible radio inputs. These have just a couple of requirements:

  • They must have different values
  • They must have the same name

I'll be using on and off as my values, with a name of toggle, but you may change this depending on your usage. For example, maybe you'll be toggling between yes and no.

Add the input to the span you created earlier. Your code should look like this:

Depending on your own usage, you may also want to place this all within a form.


Step 3: The Toggle Switch

The small circle that will be the switch itself is simply a span that we'll style later on. Give the span a class of switch and insert it after the inputs.

This is your final HTML markup:


Step 4: Style the Background

To keep things simple, we'll start out with the bare minimum required to get this toggle working. Add the following to your CSS document (or to your style element if you're using inline CSS.)


Step 5: The Invisible Inputs

These inputs need to be absolutely positioned, then shifted slightly to fit correctly. We'll then turn their opacity down to 0.


Step 6: The Toggle Switch

The switch should be square, so we can round it into a perfect circle later using a border-radius. It needs relative positioning to be able to move around, and since we need to give it a height and width, it will be a block-level element floated to the left.


Step 7: CSS Hackery!

CSS3 added the new general sibling combinator, a selector that uses the tilde (~) to select elements that share the same parent. The order in which they appear in the CSS (before or after the tilde) mirrors the order in which they appear in the DOM.

We also have access to the new :checked pseudo-class. This will allow us to specifically target the (currently invisible) radio input that is checked..

First, we'll use these selectors to reset the starting position of the toggle switch.

Next, we'll tell the browser the final toggle position.

Finally, we'll put the :checked input behind the unchecked input and the switch so that the second input can be clicked.

By now, it should look like this:

Unstyled toggle

Step 8: Story So Far

Here is the complete, unstyled CSS:


Step 9: Border Radii

You now have a goofy-looking square slider, so let's round out those corners! We'll add a border-radius of 8px to the span with a class of toggle-bg and to the span with a class of switch.

Note: As with opacity and the transition coming up, I'm not using any vendor prefixes here for the sake of the tutorial, but you'll need them for compatibility with some older browsers.

Toggle with border radius

Step 10: Transitions

Transitions should be added to the span with a class of switch. Feel free to adjust the settings. Left: is the only part of the following transition that can not be changed.


Step 11: Background, Shadows, Gradients...

Now that all the functionality is there, everything can be customized to your liking. You can add a box-shadow and background gradient to the span with a class of toggle-bg or to the switch. Because it's round, radial gradients will tend to look better on the switch.

Here are my settings, but please change them to suit your style and your project.

Give the body an off-white background and a margin so the toggle isn't right in the corner:

Add the following to the styles for .toggle-bg:

Add the following to the styles for .switch:

Styled toggle

Step 12: iOS Toggles

For an iOS style toggle, where the switch is the same size as its background, change the following in the style for .switch:

Change the final toggle position to be left 41 pixels:

Change the sizes of the inputs and remove vertical shifting by changing the following in the styles for .toggle-bg input:

Change all your border radii to 30px instead of 8px.

Tip: keep the border-radius value equal to the height of the element it modifies.

And finally, change the height and width of .toggle-bg to fit the changed elements:

iOS styled toggle


Conclusion

Congratulations! You can now create JavaScript-free toggles with some cool new CSS3. You'll probably want to change the background gradients, and luckily there is a great online tool to help with this; check out Colorzilla's free gradient editor. There's also a Mac app called Gradient that works similarly.


Browser Support

Because this method relies on some brand new CSS3 features, older browsers aren't supported. Browser support for the :checked pseudo-class includes the following:

  • All versions of Chrome
  • All versions of Firefox
  • Internet Explorer 9+
  • Opera 9+
  • Safari 3+

And the following browsers have support for the general-sibling combinator:

  • All versions of Chrome
  • All versions of Firefox
  • Internet Explorer 7+
  • Opera 9+
  • Safari 3+

jsFiddle

I've created three jsFiddles for you to experiment with on your own. The first includes the bare minimum CSS you'll need to have a working toggle slider. The second, much shinier, includes everything from the first one plus some extra styles and transitions. The last one is the one I'm calling an "iOS style toggle" since, like the toggles on iOS, the switch's height is equal to the toggle background's height.

Because this is all CSS, there are quite a few variations you can create. Here are a few to get your started:

  • Create a vertical, rather than horizontal toggle (maybe for an equalizer?)
  • Use an image with an angular gradient as the switch's background for a more realistic, metallic look.
  • Add a label to the inside of a large toggle.
  • Use jQuery to change the background of .toggle-bg when a child input is checked. Or, even better, figure out if this is possible using nothing but CSS.
  • Add a label to each input within an iOS style toggle and selectively show and hide the labels using jQuery.

Note: when creating a label for the toggle's radio inputs, you'll need to use JavaScript to show and hide the inactive input's label if you wish to be able to use the label as a way of unchecking the input. Otherwise, you'll only be able to check (but not uncheck) the input by pressing the label.

I hope you found this tutorial useful. Thanks for reading!

Advertisement