CSS Animated Slide Toggle

http://jsfiddle.net/joshnh/evePU/show/

by tzm • 14 years ago

78 25 14 years ago

jsfiddle.net

alexobenauer• 14 years ago

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.

DArcMattr• 14 years ago

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

milesokeefe• 14 years ago

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.

jmyc• 14 years ago

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.

fady• 14 years ago

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.

pazimzadeh• 14 years ago

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

douglascalhoun• 14 years ago

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.

xymostech• 14 years ago

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

PStamatiou• 14 years ago

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.

dr42• 14 years ago

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.

dakrisht• 14 years ago

That's nice

sprobertson• 14 years ago

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.

yaix• 14 years ago

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).

peeters• 14 years ago

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.

gcb• 14 years ago

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.

jacobr2• 14 years ago

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

martinaglv• 14 years ago

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).

jacobr2• 14 years ago

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.

hk__2• 14 years ago

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

i386• 14 years ago

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

alexchamberlain• 14 years ago

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

groue• 14 years ago

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.

enoughalready• 14 years ago

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...

danielschwartz• 14 years ago

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

mnicole• 14 years ago

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).

CSS Animated Slide Toggle

Related Stories