Possible Duplicate:
Should the cursor change to pointer over radio buttons, checkboxes, their labels and selects?
My problem is that the little checkbox and radio buttons for form controls in HTML are too small and hard to click. It's also not easy to increase the size of them without resorting to some really hacky methods.
What I usually do is give the label for the checkbox a for="idOfCheckbox" attribute so you can click on the label and it will select the checkbox.
Now I had another idea which might improve the usability a bit more:
.items label {
cursor: pointer;
}
This is adding a bit of CSS to change the mouse cursor when hovering over the label. In a usual browser this changes to a hand/finger pointer icon so it should let the user know they can click on the label as well to select the checkbox. I set up a little demo here for you to try.
My thoughts:
- It's still differentiated from a hyperlink because if it's a hyperlink then it'll usually be blue coloured and have an underline underneath it when you hover over it.
- I think it is more obvious than the mouse pointer basic arrow
when hovering over the label which would indicate it was just basic text and you couldn't click on it unless you tried it first and realised you could. Some websites make the labels clickable, bad ones don't so usually you don't know till you try.
- Added bonus when you hover over it, the checkbox lights up light blue so that's an added visual that you can click the label. The problem with leaving the mouse icon as a basic arrow and just having the checkbox light up blue is that by itself it is a pretty subtle thing for a user to notice and instantly know they can click the label.
Anyway thought I'd get an opinion from the UX experts, is it a good or bad idea?
Solution:
Checkboxes are most usable with label tag wrapping the checkbox with display: block
and a bit of extra padding around the label so there's more clickable area. Then on mouse hover, the mouse icon changes to and the background colour of the label changes as well to indicate it's selected. I figured out how to make the whole table row selectable as well. See demo here.