4 ms·

CSS Click Events

• Svip 14y ago
  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-new-image-replacement/ http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-...
  • denzeldenzel 14y ago
    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.
    • talmand 14y ago
      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.
• bluetidepro 14y ago
  > "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! :)
• deleted 14y ago
  [deleted]