How to set an inline image replacement with dynamic height for checkboxes?

Question

I tried to follow this which is fine for background image replacement and fixed dimensions. But how about having an inline image as a image replacement where the image has a dynamic height?

<input type='checkbox' name='thing' value='valuable' id="thing"/><label for="thing"></label> 

input[type=checkbox] {
  display:none;
}

input[type=checkbox] + label {
  background: #999;
  height: 16px;
  width: 16px;
  display:inline-block;
  padding: 0 0 0 0px;
}
input[type=checkbox]:checked + label {
  background: #0080FF;
  height: 16px;
  width: 16px;
  display:inline-block;
  padding: 0 0 0 0px;
}

Looking for a replacement for

<label for="thing">
 <input type='checkbox' name='thing' value='valuable' id="thing"/>
 <img src="img.jpg" height="auto">
</label>

Can you create a JSFiddle or Codepen? :-) I don't quite understand what you're trying to create :-/ — GROVER., Jan 02 '17 at 10:29
I need an image replacement for a checkbox, the image has to be inline and we do not know its dimensions. The following isn't with an inline image http://jsfiddle.net/4huzr/ — rob.m, Jan 02 '17 at 10:30
http://jsfiddle.net/4huzr/3207/ I don't understand what you mean by "inline" in this case. — connexo, Jan 02 '17 at 10:34
an inline image not a background image see the question example — rob.m, Jan 02 '17 at 10:37
I still don't understand what you want. Btw, `` is invalid HTML. — connexo, Jan 02 '17 at 10:39
@connexo ok i had a semicolom instead of =. So basically i cannot have an inline image inside a label? — rob.m, Jan 02 '17 at 10:42
Of course you can, but you explicitly asked for a replacement for that. — connexo, Jan 02 '17 at 10:42
a checkbox replacement with the image. I need to click on the inline image and act as the checkbox — rob.m, Jan 02 '17 at 10:43
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/132082/discussion-between-rob-m-and-connexo). — rob.m, Jan 02 '17 at 10:45

score 2 · Accepted Answer · answered Jan 02 '17 at 10:58

input[type=checkbox] {
  display: none;
}

input[type=checkbox] + label {
  border: 10px solid transparent;
  display: inline-block;
  font-size: 0;
  transition-duration: 0.4s;
}

input[type=checkbox]:checked + label {
  border-color: green;
}

<input type='checkbox' name='thing' value='valuable' id="thing" />
<label for="thing"><img src="//lorempixel.com/200/100" alt="checkbox" /></label>

Rounin · Answer 2 · 2017-01-02T11:17:32.157

If I have understood your question correctly, I think you can achieve this straightforwardly:

$(document).ready(function(){
    $('input').each(function(){
        $(this).click(function(){
          alert('You clicked Checkbox ' + $(this).attr('name'));
        });
    });
});

input[type=checkbox] {
  display:none;
}

input[type=checkbox] + label {
  background: #999;
  height: 16px;
  width: 16px;
  display:inline-block;
  padding: 0;
}

input[type=checkbox]:checked + label {
  background: #0080FF;
  height: 16px;
  width: 16px;
  display:inline-block;
  padding: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label for="thing1">
<input type="checkbox" name="thing1" id="thing1" value="valuable" />
<img src="http://placehold.it/16x16" />
</label>

<label for="thing2">
<input type="checkbox" name="thing2" id="thing2" value="valuable" />
<img src="http://placehold.it/24x24" />
</label> 

<label for="thing3">
<input type="checkbox" name="thing3" id="thing3" value="valuable" />
<img src="http://placehold.it/32x32" />
</label>

score 0 · Answer 3 · edited Sep 25 '17 at 06:37

This trick depends on:

The for attribute so that a <label> can be an extension of the <[=checkbox]> so that any event happening to the label, happens to the <[=checkbox]> as well.
The adjacent sibling selector + which selects the sibling node immediately next. In this case: <[=checkbox]> + <label>
The :checked pseudo-class which enables the <[=checkbox]> to be in and/or influence 2 distinct states of styles.

Note in the Snippet, the <img> can be of any size.

SNIPPET

.chx {
  display: none;
}
label {
  border: .5px inset #fefefe;
  border-radius: 100%;
  background: rgba(0, 0, 0, .1);
}
.chx:checked + label img {
  opacity: 1;
  transition: opacity 1.2s ease-in;
}
.chx + label img {
  opacity: 0;
  transition: opacity .9 ease-out;
}

<input id='chx1' class='chx' type='checkbox' checked>
<label for='chx1'>
  <img src='http://www.seaicons.com/wp-content/uploads/2016/11/Button-Blank-Green-icon.png' width='50'>
</label>
<input id='chx2' class='chx' type='checkbox' checked>
<label for='chx2'>
  <img src='http://www.freeiconspng.com/uploads/delete-button-png-24.png' width='128'>
</label>
<input id='chx3' class='chx' type='checkbox' checked>
<label for='chx3'>
  <img src='http://images.all-free-download.com/images/graphiclarge/round_yellow_play_button_4032.jpg' width='256'>
</label>

How to set an inline image replacement with dynamic height for checkboxes?

3 Answers3