

CSS Animated Slide Toggle - tzm
http://jsfiddle.net/joshnh/evePU/show/

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

~~~
douglascalhoun
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
I think that's only because then the click is getting registered, not because
of the dragging.

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

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

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

------
jacobr
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
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
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...](http://www.w3.org/TR/2011/REC-
CSS2-20110607/generate.html#before-after-content)

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

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

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

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

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

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

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

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

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

------
dakrisht
That's nice

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

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

