Adnan Mujkanovic Adnan Mujkanovic - 8 months ago 46
HTML Question

Extend chechbox clickable area without label

My code looks like this:

<div class="hovereffect">
<img class="img-responsive" src="/some-image" alt="">
<input type="checkbox" class="img-checkbox">

.hovereffect {
width: 100%;
height: 100%;
margin-bottom: 20px;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;

.hovereffect .img-checkbox{
position: absolute;
width: 18px;
height: 18px;
top: 3px;
right: 5px;
cursor: pointer;

image with checkbox

So there is the checkbox in the right upper corner over the image and would like to extend the clickable are to the whole image for a better user experience.

As you can see the checkbox has no label and I would like to achieve the goal without a label.

I tried tricks with the ::after element which kinda worked with chrome but not really with firefox and I couldn't make the clickable area responsive that is to say, extend to the whole area of the image.


Can you use Javascript/jQuery? You can add a click event on the image that check the

$('.img-responsive').click( $('.img-checkbox').attr('checked', true); );

Or something like that.