It chanced upon me that i should have used input after I had completed the styling for the flip switch. Since I was already halfway there, I just went ahead with the javascript binding.
If I'm not wrong, firefox support for css perspective is lacking hence the flip switch looks flatter in firefox.
Saw your fiddle example. Awesome stuff~!
Oh believe me, I understand the need to get something to the done part once you've fiddled with it for a while. If anything, it's a good start on something that could be expanded into "useful" state. That is, once enough browsers catch up to the CSS3 requirement.
Thanks for the compliment. I'm actually going to be giving a Meetup presentation later this month in the Dallas area on this topic, that's why I was quick on the reply.
Here's more fiddle stuff if you're interested:
http://jsfiddle.net/user/talmand/
I have several examples of using the checkbox in that manner.
Pretty sure CSS 3D transforms aren’t available yet in Firefox (at least in non-alpha versions).
Re:CSS3 Flip Switch
by mcpherrinm on Sunday February 05, 2012 @01:06PM
(#3554658)
The latest release, Firefox 10, has 3D transforms. (I think -- I only have the nightly installed, which certainly does).
Excuse me, you are right. In my defense, FF10 isn’t quite a week old.
Looking at the HTML I'm guessing you need javascript to detect it's current state to be able to act on it since it's just a bunch of divs?
I've played with similar ideas but going in a completely different direction. I use a checkbox for my toggle and just use CSS to alter the appearance based on that checkbox, no javascript.
http://jsfiddle.net/talmand/tb9NZ/
Seems to work for me on Firefox and Chrome but not so much IE. It was an experiment so I didn't bother to work out that problem of fallback for IE.