Using Checkbox hack on live websites

Question

Recently, there have been many examples of what is possible using the "Checkbox Hack" with CSS.

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

"Checkbox Hack" is where you use the associated shortcut and checkbox input and usually some other element that you are trying to control

Source and additional information about hacking.

What I recently liked was the CoDrops experiment with radio buttons, to create filter functionality with CSS only. Just amazing.

In hack, you can do some pretty interesting things that require JavaScript. The problem is that the checkbox and radio buttons are allowed only for forms, so this is bad semantics. But I don’t see the problem of using “hacking” compatible in most browsers and working for mobile devices, if that means less JavaScript and better performance.

Do you think that this type of hack will be “good” for use on live websites, even if it is bad semantics or do you think it is normal to use?

Answer 1

Read the big yellow disclaimer on the site you contacted:

Disclaimer Some of this stuff crosses the line of what you should “do with CSS and introduce some bad semantics. It's still wicked fun to play and chill out, which is possible, but in general the functional behavior should be controlled by JavaScript.

I would not say that this is a “hack” on it. All this is absolutely true, there are many other crazy things you can do with the + or :focus selector too, for example. However, it can definitely be used for some “hacker” things.

If, for example, it helps the user fill out the form: that's great. Just remember that support :checked not universal, so if the usability of your site depends on it, look for alternative solutions / layouts through javascript.

If you just add checkbox elements to your markup for the sake of behavior / presentation, then yes - you should avoid it. If you already have an element to start with, and you just improve it with it, that's great.