6 ms·

CSS Animated Slide Toggle

78 points by tzm 14y ago

alexobenauer 14y 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 14y 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/ http://jsfiddle.net/DArcMattr/uhwQp/1/show/ edit: added an attempt at making it cross-browser
- milesokeefe 14y 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 14y 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 14y 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 14y ago
  I agree. If you're going for skeuomorphism you should take it all the way in terms of manipulating 3D elements.
- douglascalhoun 14y 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 14y ago
    I think that's only because then the click is getting registered, not because of the dragging.
- PStamatiou 14y 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 14y 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 14y ago
That's nice
sprobertson 14y 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 14y 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 14y 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 14y 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.
jacobr 14y ago
For CSS demos, I suggest using http://dabblet.com 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 http://wiki.csswg.org/spec/css4-ui#dropped-css3-features
- martinaglv 14y 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).
  - jacobr 14y 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#before-after-content 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 14y ago
I've already made something like this some months ago: http://demos.bfontaine.net/d/icheckboxes http://demos.bfontaine.net/d/icheckboxes
- i386 14y ago
  FYI, they don't work at all on iOS 5.1
alexchamberlain 14y ago
The best bit about this is that the HTML markup has not been changed for the visual effects. Well Done!
groue 14y 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 14y 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 14y 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 14y 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).

78 points by tzm 14y 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 14y 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/ http://jsfiddle.net/DArcMattr/uhwQp/1/show/ edit: added an attempt at making it cross-browser
milesokeefe 14y 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 14y 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 14y 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 14y ago
I agree. If you're going for skeuomorphism you should take it all the way in terms of manipulating 3D elements.
douglascalhoun 14y 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 14y ago
  I think that's only because then the click is getting registered, not because of the dragging.
PStamatiou 14y 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 14y 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 14y ago

That's nice

sprobertson 14y 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 14y 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 14y 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 14y 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.

jacobr 14y ago

For CSS demos, I suggest using http://dabblet.com 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 http://wiki.csswg.org/spec/css4-ui#dropped-css3-features

martinaglv 14y 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).
- jacobr 14y 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#before-after-content 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 14y ago

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

i386 14y ago
FYI, they don't work at all on iOS 5.1

alexchamberlain 14y ago

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

groue 14y 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 14y 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 14y 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 14y 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).