Using the "Checkbox" hack on live websites

Question

So recently there has been a lot examples of what the "Checkbox Hack" is possible of with CSS.

Css-Tricks has a good explanation on what the hack does:

The "Checkbox Hack" is where you use a connected label and checkbox input and usually some other element you are trying to control

Source & more information of the hack.

What recently got me liking the hack was CoDrops experiment with radio buttons to create filter functionality with just CSS. Just amazing.

The hack can do some pretty amazing stuff that would require JavaScript without. The problem is that the checkbox and radio buttons is only suppose to be used for forms, so it's bad semantics. But I don't see the problem of using a "hack" that is compatible in most browsers and work-around for mobile devices if it means less JavaScript and better performance.

Do you think that this kind of hack would be "okay" to use on live websites, even though it's bad semantics or you think, it's okay to use?

Answer 1

Read the big yellow disclaimer on the site you linked to:

Disclaimer: Some of this stuff crosses the line of what you "should" do with CSS and introduces some bad semantics. It's still wicked fun to play with and cool that it's possible, but in general functional behavior should be controlled by JavaScript.

I wouldn't say this is a "hack" on it's own. It's all perfectly valid, there's a lot of other crazy stuff you can do with the + adjacent selector or :focus too, for example. However, it can definitely be used for some "hacky" stuff.

If for instance, it aids a user to complete a form: that's great. Just remember that support for :checked is not universal, so if the usability of your site relies on it, seek alternate solutions/shims via javascript.

If you're just adding the checkbox elements into your markup for the sake of behavior/presentation, then yes - you should avoid it. If you already had the element to begin with and you're merely improving the user experience with it, that's great.