Extend chechbox clickable area without label

Question

My code looks like this:

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

.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;
}

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.

score 1 · Accepted Answer · edited Jul 27 '16 at 16:22

1

Can you use Javascript/jQuery?

You can start by assigning unique id to every image you have (Ex: img1,img2,img3) and every checkbox associated to the image (Ex: img1-checkbox).Then you can use the code below:

$('#img1').click( $('#img1-checkbox').attr('checked', true); );

Or something like that.

edited Jul 27 '16 at 16:22

Hari Harker

702
1
12
29

answered Jul 27 '16 at 12:24

davidgagnedesign

34
3

the thing is its a media library im building and there are many images there so i would need to add unique class names to all images. Your suggestion is good. I could do it with jquery/js but it maybe too much unnecessary js code that could be solved with css. right? – Gabriel Stein Jul 27 '16 at 12:57
`class` is mentioned in common for a group of elements and `id` is for individual elements (unique). So, you can assign `id` to your images and then use those **ids** in your jquery code. – Hari Harker Jul 27 '16 at 13:29

score 0 · Answer 2 · edited May 23 '17 at 12:14

This has been a problem since a very long time and you simply cannot achieve your goal with pure css. The only available ways of getting it done are ou using label or jquery/javascript or :after pseudo class.

If you want to expand the checkbox size, then try this:

.hovereffect input[type=checkbox]
{
  width:100px !important; //adjust as per need
  height:100px !important; //adjust as per need
}

This will increase the clickable area of the checkbox field. Working Link

But, if you want the checkbox to be transparent and show the image behind, then you will have to use label and set it's background color to transparent.

I'm waiting to see someone prove me wrong with working code.

Extend chechbox clickable area without label

2 Answers2