Extending the clickable area around a checkbox with jQuery

Question

I'm designing a task list that uses the standard, browser-supplied checkboxes. But IMHO the checkbox areas are too small and difficult to click, especially if you're doing semi-power user style clicking of multiple checkboxes (for users who don't know keyboard shortcuts but want to do a lot of archiving, deleting, etc. all at once).

Is there any way to make the area around the checkbox clickable, say an extra 5px of padding around it? I'm using jQuery for my primary client-side code, though I'm not opposed to using plain old JS if it makes better sense.

Oh, and I'm not really looking for a plugin. Something lightweight is in order here.

Cheers in advance!

Answer 1

It's an old post but I just tried to do the same thing and padding / sizing didn't make a difference to the "hit" area. I used jQuery on the container that holds the checkbox (in this case a td as I have a grid of them, but divs should work):

html

<td class="expandCheck">
  <input type="checkbox" name="cfg[][]">
</td>

js

$(".expandCheck").on('click', function (e) {
    cb = $(e.target).children(":checkbox");
    cb.attr("checked", !cb.attr("checked"));
});

Answer 2

Works in chrome as of 2016:

<style>
.cb{
    position: relative;
    margin:0;
}
.cb:before {
    content:'';
    position: absolute;
    top:-10px;
    bottom:-10px;
    left:-10px;
    right:-10px;
}
</style>

<input type="checkbox" class="cb" />