How to Tick a checkbox on Clicking an image

Question

I was able to create the code for it, but the checkbox doesn't appear above the image. It's slightly displaced, how do i fix it?

.custom-checkbox input {
  display: none;
}

.custom-checkbox span {
  border: 2px solid #7e8a94;
  float: right;
  height: 20px;
  width: 20px;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.custom-checkbox:hover span,
.custom-checkbox input:checked + span {
  border: 3px solid #43D8B0;
}

.custom-checkbox input:checked + span:before {
  content: "✔";
}

 <label class="custom-checkbox">
    
 <img class="img" src="http://i63.tinypic.com/2rrqs1l.png"/>
  <input type="checkbox">
  <span></span>
</label>

I want the checkbox to appear on the top left side, This way: http://prntscr.com/j960yk

Thanks for your time.

the question title doesn't describe what you are asking for in the question details — Amr Elgarhy, Apr 23 '18 at 20:08
Possible duplicate of [Use images like checkboxes](https://stackoverflow.com/questions/30663562/use-images-like-checkboxes) — connexo, Apr 23 '18 at 20:08
No, this is not a duplicate of the previous question, i have already referred it, before posting this one. — joe997, Apr 23 '18 at 20:11

CodeF0x · Accepted Answer · 2018-04-23T20:38:08.643

5

Added float: left; to your .custom-checkbox span CSS rule, added a br tag and modified your HTML a bit.

.custom-checkbox input {
  display: none;
}

.custom-checkbox span {
  border: 2px solid #7e8a94;
  /* float: right; - you don't need that. Use float: left; */
  float: left;
  height: 20px;
  width: 20px;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.custom-checkbox:hover span,
.custom-checkbox input:checked+span {
  border: 3px solid #43D8B0;
}

.custom-checkbox input:checked+span:before {
  content: "✔";
}

<label class="custom-checkbox">
 <input type="checkbox">
  <span></span>   
  <br>
  <br>
 <img class="img" src="http://i63.tinypic.com/2rrqs1l.png"/>
</label>

edited Apr 23 '18 at 20:38

answered Apr 23 '18 at 20:14

CodeF0x

2,624
6
17
28

with float:left, it comes to the left hand side of the image (http://prntscr.com/j96aft), i want to show the checkbox on the TOP-left of the image. – joe997 Apr 23 '18 at 20:22
can you please implement it with my image (http://i63.tinypic.com/2rrqs1l.png), with your image it appears properly, but with mine, it still displaces a bit. (http://prntscr.com/j96hnh) – joe997 Apr 23 '18 at 20:35
even while trying it in stackoverflow, it still displaces (http://prntscr.com/j96ics). – joe997 Apr 23 '18 at 20:37
@joe997 Even with your picture, it works fine for me. https://jsfiddle.net/tgm1mLaL/2/ – CodeF0x Apr 23 '18 at 20:38
YES, it works now, earlier it wasn't,. THANK YOU SO MUCH. – joe997 Apr 23 '18 at 20:43

score 1 · Answer 2 · answered Apr 23 '18 at 20:13

1

 <label class="custom-checkbox">

 <img class="img" src="https://placeimg.com/640/480/any" width="300"/>
  <input type="checkbox">
  <span></span>
</label>

$(document).ready(function() {
 $('img').click(function() {
 $(this).find('checkbox').checked(true);
 })
});

working fiddle https://jsfiddle.net/y88zLp2r/

answered Apr 23 '18 at 20:13

mike123

1,549
15
23

It seems to me he had a problem with position of checkbox, not functionality – Ludovit Mydla Apr 23 '18 at 20:14
Yes, i was able to create this version of it, please refer to my version, i want the tick box in this fashion(http://prntscr.com/j960yk). Plus, i don't wish to use the basic checkbox, i prefer mine. – joe997 Apr 23 '18 at 20:15
yes problem with POSITION of checkbox not functionality. – joe997 Apr 23 '18 at 20:15

score 1 · Answer 3 · answered Apr 23 '18 at 20:24

just place the input before the image and remove the float right style.

.custom-checkbox input {
  display: none;
}

.custom-checkbox span {
  border: 2px solid #7e8a94;
  height: 20px;
  width: 20px;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.custom-checkbox:hover span,
.custom-checkbox input:checked + span {
  border: 3px solid #43D8B0;
}

.custom-checkbox input:checked + span:before {
  content: "✔";
}

<label class="custom-checkbox">
 <input type="checkbox"/> 
  <span></span>
  <img class="img" src="http://i63.tinypic.com/2rrqs1l.png"/>
</label>

score 1 · Answer 4 · answered Apr 23 '18 at 20:24

1

Add some more css

.custom-checkbox{
   position: relative;
   display: inline-block;
   padding-top: 30px;
 }
 .custom-checkbox span{
   position: absolute;
   top: 0;
   left: 0;
 }

This will work

answered Apr 23 '18 at 20:24

Jitendar

497
2
5
11

NOPE, this one appears ON the image, not above the image. (http://prntscr.com/j96di1) – joe997 Apr 23 '18 at 20:27
set span top property to -30px i.e why i used top padding on label. – Jitendar Apr 23 '18 at 20:33
above solution works perfectly fine. check my second answer where I combined your and my code. – Jitendar Apr 23 '18 at 20:44

score 1 · Answer 5 · answered Apr 23 '18 at 20:41

.custom-checkbox input {
  display: none;
}
.custom-checkbox{
   display: inline-block;
   position: relative;
   padding-top: 30px;
 }

.custom-checkbox span {
  border: 2px solid #7e8a94;
  float: right;
  height: 20px;
  width: 20px;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
}

.custom-checkbox:hover span,
.custom-checkbox input:checked + span {
  border: 3px solid #43D8B0;
}

.custom-checkbox input:checked + span:before {
  content: "✔";
}

 <label class="custom-checkbox">
    
 <img class="img" src="http://i63.tinypic.com/2rrqs1l.png"/>
  <input type="checkbox">
  <span></span>
</label>

Haris · Answer 6 · 2018-04-23T20:49:57.287

0

 .custom-checkbox span {
     border: 2px solid #7e8a94;
     height: 20px;
     width: 20px;
     border-radius: 5px;
     cursor: pointer;
     display: flex;
     justify-content: center;
     align-items: center;
}

Change html like this

<label class="custom-checkbox">
  <input type="checkbox">
  <span></span>
 <img class="img" src="http://i63.tinypic.com/2rrqs1l.png">
</label>

edited Apr 23 '18 at 20:49

answered Apr 23 '18 at 20:17

Haris

126
3
11

the checkbox in this case shows ON the image (http://prntscr.com/j96cd8), i want it to be on the TOP LEFT corner of the image(http://prntscr.com/j960yk) – joe997 Apr 23 '18 at 20:25
changed answer @joe997 – Haris Apr 23 '18 at 20:50

score 0 · Answer 7 · answered Apr 23 '18 at 20:20

By adding the for attribute to your label, and assigning it the same value as the name attribute for the checkbox, the label will work as a clickable extension of your checkbox.

This way, you can place the label wherever you want in the layout. Like so:

<label for="image-checkbox" class="custom-checkbox">
    <img class="img" src="http://i63.tinypic.com/2rrqs1l.png"/>
</label>
<input type="checkbox" name="image-checkbox">

rakesh ROCKING · Answer 8 · 2018-04-23T20:33:22.113

$(document).on('ready',function(){
$("#avatar").on('click',function(){
$("#chkbox").trigger( "click" )

})

})

    .container {
      position: relative;
      width: 50%;
    }

    .image {
      display: block;
      width: 100%;
      height: auto;
    }

    .overlay {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      height: 100%;
      width: 100%;
      opacity: 0;
      transition: .5s ease;
      background-color: #0000;
    }

    .container:hover .overlay {
      opacity: 1;
    }
    

    .text {
      color: white;
      font-size: 20px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      text-align: center;
    }

<div class="container">
      <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar"  class="image">
      <div id="avatar" class="overlay">
        <div class="text"><input id="chkbox" type="checkbox"></div>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

score 0 · Answer 9 · answered Sep 30 '21 at 17:21

0

You can use a "label" tag that contains an "img" tag inside.

I only use html and css.

I have the answer at this link:

https://stackoverflow.com/a/69395887/12569619

answered Sep 30 '21 at 17:21

Vương Hữu Thiện

1,460
14
21

How to Tick a checkbox on Clicking an image

9 Answers9