For, hover, size and padding on the checkbox input

published on August 1, 2011 in technical

Isn't it frustrating not to be able to check a checkbox due to its small size? Here are a few ideas on how to improve that.

1. The <label> its for property

We have a checkbox input. To be able to present this in a usable way, we must explain what it is good for. For this purpose we have the <label> tag. When we are finished with this label text, let us do a little more. Specify which input this <label> refers to, by setting its the target element's id as the label's for property.

And we have stepped a  big one ahead, because now the checkbox may be cheched by clicking on its label, too.

2. <label> padding

The above trick might not be enough. The text and the label might be so small, that they are still difficult to use. Some users might not be able to click exactly on the label text. Therefore, we should set up a bit of padding to the label. This way, if the user doesn't click the label, but somewhere close to it, he can still check in the checkbox.

3. Checkbox size

Just as the label padding, an increase of the checkbox size might help users click it more precisely. 

4. Hover

:hover was not made up for this, but in this case we may use it, as it would help users. Put the checkbox and the label into a <div> tag, then set a different background color for the div's :hover state. This way, we can suggest to our user, that the two belong together, which is a must on complicated forms, where things are obvious enough.
In the case of simple forms, this might not do any good, on the contrary, it might look bad.

5. Conclusion

Four small quick steps for us make the user's experience much better.