CODEWITHSUNDEEP
javascripthtmlcss
joe997
joe997

Reputation: 45

How to Tick a checkbox on Clicking an image

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.

Upvotes: 1

Views: 1018

Answers (9)

Vương Hữu Thiện
Vương Hữu Thiện

Reputation: 1710

enter image description here

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

Upvotes: 0

Haris
Haris

Reputation: 126

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

Upvotes: 0

Jitendar
Jitendar

Reputation: 497

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

Upvotes: 1

CodeF0x
CodeF0x

Reputation: 2682

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>

Upvotes: 5

rakesh ROCKING
rakesh ROCKING

Reputation: 81

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

Upvotes: 0

Jitendar
Jitendar

Reputation: 497

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

Upvotes: 1

Yamada
Yamada

Reputation: 723

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>

Upvotes: 1

Niche
Niche

Reputation: 967

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

Upvotes: 0

mike123
mike123

Reputation: 1559

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

Upvotes: 1

Related Questions