CSS Click Events

tympanus.net

21 points·pbotelho··4 comments

> "This blog post is about showing the possibilities of CSS and some clever hacks. It’s clearly not for “real life” use cases. Please, consider the whole article as a playground for experimenting, not as a tutorial to handle click events on your website or application."

I just want to make sure people see that part of the post. Great post, but as the disclaimer says, there are many reasons you should not do this for a client website, your application, etc.

Other than that, this has some really neat concepts in it. I have always been a big fan of the work done by Codrops! :)

You don't have to hide the checkbox like that; display: none; is fine. Also looks better code-wise.

And apparently performance wise: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-...

display:none will be problematic for mobile Safari since the label click won't trigger the checkbox to be checked. The 100% text-indent snippet from that article on zeldman.com does not seem to work when applied to a checkbox... it remains visible.

Another way is to put the checkbox within the label and absolute position it to the outside of the label's box. With the label having a relative position and hidden overflow you shouldn't see the checkbox. But this may not be suitable based on the design and other factors. Plus I haven't browser checked it since I would normally do such things with Javascript.

Reply on news.ycombinator.com