Just a suggestion: I was annoyed when I first tried to drag the slider. I figured out you have to click it instead, but some users may just quit first.

We used to have two toggles for delivery settings (photo prints/email on/off-- coded as checkboxes) on Picplum and we quickly learned that people tried to drag them as well. So we reverted back to plain checkboxes. Sometimes just because you can do something (and it's pretty) doesn't mean it's usable.

I agree. If you're going for skeuomorphism you should take it all the way in terms of manipulating 3D elements.

yeah, i did the same thing. maybe have both options available, or even when someone visits the site on a mobile device then the click n drag feature is enabled.

You can drag it, you just can't end the drag motion outside of the dongle area. Took me a few tries to figure that out myself.

I think that's only because then the click is getting registered, not because of the dragging.

Very cool... in Webkit browsers. It's a shame few (if any) other browsers allow you to customize a checkbox this way.

Nonetheless, nice work on theming a native checkbox so well. I'd love to use it if it were cross-browser compatible.

I wish joshnh would have included a note about webkit or lack of FF support. I toggled it for 30 seconds or so before opening the source, noticing it was webkit, and switching to Chrome.

At a first glance, many of the -webkit-* rules in that project's CSS are implemented in other browsers, such as current versions of Opera and Firefox.

It looks like it's relying on the webkit-only "-webkit-appearance" property, as you can see here: http://jsfiddle.net/DArcMattr/uhwQp/1/show/

edit: added an attempt at making it cross-browser

Looks nice.

But I think the [x] or [ ] of a normal checkbox are more intuitive than two different colors that may have different meanings in other cultures/countries (and I am not even starting about color blindness).

I agree. I think it would go a long way to have the visible side display a red X or a green checkmark, rather than an ambiguous background.

For CSS demos, I suggest using http://dabblet.com which will automatically add vendor-prefixes. In this case it might not have helped due to the appearance property (which was dropped from the CSS spec [1]), but often only webkit prefixes are used even if properties are supported in other browsers.

1: http://wiki.csswg.org/spec/css4-ui#dropped-css3-features

This won't actually work in any other engine except for webkit, even if you vendor-prefix the rules. This is because he is using an :after pseudo element on a checkbox, which shouldn't work and is technically a bug in webkit (according to the specifications, you cannot use :before/:after on replaced elements).

Oh, didn't notice that. The specification actually does not explicitly prohibit pseudo content on replaced elements.

    This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.

http://www.w3.org/TR/2011/REC-CSS2-20110607/generate.html#be...

In my opinion it would be cool if all browsers supported it.

I get a little tired of seeing people override their web form elements this way because they should only be used for gestural interfaces, and even then it can be annoying. Trying to translate it to web just causes confusion for the user -- they don't know whether to click on it (in which case it is too wide and bulky for many circumstances) or slide it (which is unnatural for the web outside of range sliders).

What about adding the ability to drag the slider, so that the widget acts as it should act, that is to say as other sliding toggles? It would then be perfect! Rationale : that's again the problem of half-baked UI elements, which confuse their end-users, while the developpers feel satisfied and enjoy long drinks.

Thought it wasn't so cool until I checked it out to see that this entire thing is a single <input>, not even an image in sight. Great job. It'd be cool to see as a light-switch that did something with page contrast.

You'd probably have a better framerate if you used translate or translate3d instead of a simple transition. Framerate is fine in Chrome but isn't fantastic on iPhone/iPad

I've already made something like this some months ago: http://demos.bfontaine.net/d/icheckboxes

FYI, they don't work at all on iOS 5.1

On mobile devices, there is about a 1 to 1.5 second delay before the animation begins. touchstart and js might be a better solution...

The best bit about this is that the HTML markup has not been changed for the visual effects. Well Done!

It's really hard to use on the iPad, it doesn't behave how one might expect, click it makes the window zoom, clicking a second time slides the toggle. Sliding the toggle does nothing.

looks awful as hell in opera.

somehow it makes the browser render the checkmark behind the checkbox, you can barely see the end of the mark.