Comments on: How to Create a Toggle Switch in CSS3

By: Paul

Paul — Mon, 13 May 2013 05:42:13 +0000

I don’t know how I can use this, but it looks pretty cool. It seems that some day it may come in handy. I don’t have time to go over the lesson, but if I find a use for it some day I certainly will. I love to get these tips in the email and bookmark them. One more than one occasion I have bookmarked such a tip as this one and went back found it and used in on a website. Thanks for the cool tips.

Paul

By: Craig Buckler

Craig Buckler — Sun, 12 May 2013 10:38:59 +0000

Hi Paul. I have a follow-up post coming soon which suggests some improvements and explains the Safari/Android issue. Incidentally, you should find it works on Chrome for Android – it’s only the stock browser which causes problems because it has an older webkit engine.

By: Antonis

Antonis — Sun, 12 May 2013 06:23:06 +0000

No js, only css….. that was AMAZING !!!

By: Paul

Paul — Sat, 11 May 2013 22:19:16 +0000

Nice, this works on Android 4.1, which Craig’s unfortunately doesn’t. Props to both you!

By: Craig Buckler

Craig Buckler — Sat, 11 May 2013 07:48:48 +0000

Thanks Sai. I’m sure I wasn’t the first person to do it, but most solutions I’ve seen use superfluous tags or JavaScript.

By: Sai Pc

Sai Pc — Fri, 10 May 2013 15:08:40 +0000

You know, i’ve been visiting sitepoint for a very long time..and EVERY single time,craig, you amaze me with something totally out of the box..:O :O who would’ve thought of toggle switches using pure css? you are just plain brilliant :)

By: Andy Kirk

Andy Kirk — Fri, 10 May 2013 13:33:53 +0000

Hi again,
I can’t reply to your deeper reply, so just replying here instead.
Thanks for the offer of citing me for the hidden input trick. I didn’t invent it though – I’ve no idea who did.
I first came across it in the Zend Framework a few years back and I’ve been using it ever since :-)

By: Craig Buckler

Craig Buckler — Fri, 10 May 2013 12:33:08 +0000

Yep – you’re definitely right and I’ve slapped myself for having my head turned by wanton CSS animation without considering accessibility. I’m going to see if there’s an easy way to do it without adding further elements.

By: Richard

Richard — Fri, 10 May 2013 11:40:31 +0000

It is also worth pointing out that an indicator of red or green to show whether an option is on or not, wouldn’t be enough by itself, because of colour blindness issues. Admittedly the left or right status of the button may make it clear, but I am not sure everyone would see that as being obvious. From a usability point of view, more is needed, for example the on/off text in the iPad/iPhone example posted in the comments.

By: Richard

Richard — Fri, 10 May 2013 11:36:51 +0000

It is generally better to go beyond the default focus indicator, I often find it hard to see, and not just around a checkbox, and I have good vision (with my glasses on anyway).

By: Craig Buckler

Craig Buckler — Fri, 10 May 2013 08:28:14 +0000

Thanks Andy.

I’ve never considered that hidden input method before, but it’s a very interesting solution. I think I may need to write a short article about it! I’ll cite you as the reference…

By: Craig Buckler

Craig Buckler — Fri, 10 May 2013 08:23:46 +0000

Thank you!

By: Craig Buckler

Craig Buckler — Fri, 10 May 2013 08:23:26 +0000

I did try label as a container but it won’t work. Until CSS supports parent selectors, it’s not possible to style the label based on the the :checked state of the input.

Richard – the span method should work, but isn’t it simply a div by another name?

By: Craig Buckler

Craig Buckler — Fri, 10 May 2013 08:16:48 +0000

Fieldsets are normally placed around groups of related input boxes, e.g. a login form would have the email, password, a “keep me logged in” checkbox and the submit button. I’ve used a div because it’s separating individual fields. While they’re not strictly necessary, styling form controls is far simpler and more likely to work in all browsers.