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.

Answer 1

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> 

Answer 2

 <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/

Answer 3

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> 

Answer 4

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

Answer 5

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

Answer 6

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

Answer 7

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">

Answer 8

 $(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> 

Answer 9

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