Replacing checkbox with image

Question

I'm trying to have a image instead of a checkbox. And when clicked it overlays the checkmark on the image. This html is auto gen from formidable pro thus im trying to do it with css.

Thank you for all the help.

#frm_checkbox_83-0 {border: 1px solid red;}

#frm_checkbox_83-0 input[type="checkbox"] {display: none; }

#frm_checkbox_83-0 input[type="checkbox"] {
  background: url('http://www.uswebcompany.com/plugins/formidable/wp-content/uploads/2016/01/christmasLights.png') 0 0px no-repeat;
  z-index: 10;
  content: "";
  display: inline-block;
  font-size: 12px;
  height: 75px;
  width: 75px;
  line-height: 16px;
  margin: -2px 6px 0 0;
  text-align: center;
  vertical-align: middle;
  position: relative;
  border-radius: 10px;
  background-color: #6283B2;
}

#frm_checkbox_83-0 input[type="checkbox"]:checked {
  background: url('http://www.uswebcompany.com/plugins/formidable/wp-content/uploads/2016/01/checkmark.png'), url('http://www.uswebcompany.com/plugins/formidable/wp-content/uploads/2016/01/christmasLights.png') 0 0px no-repeat;
  height: 75px;
  width: 75px;
  border-radius: 10px;
  background-color: #37924A;
}

<div class="frm_opt_container">
  <div class="frm_checkbox" id="frm_checkbox_83-0">
    <label for="field_a8mjgv-0">
      <input type="checkbox" name="item_meta[83][]" id="field_a8mjgv-0" value="Option 1"/> Option 1
    </label>
  </div>
  <div class="frm_checkbox" id="frm_checkbox_83-1">
    <label for="field_a8mjgv-1">
      <input type="checkbox" name="item_meta[83][]" id="field_a8mjgv-1" value="Option 2"/> Option 2
    </label>
  </div>
</div>

However it still doesn't work. The html is slightly different from that one — Us Web Company, Jan 14 '16 at 16:25
It's also a duplicate of your [previous question](http://stackoverflow.com/q/34769797/1641943). — Karl Dawson, Jan 15 '16 at 09:48

score 0 · Answer 1 · answered Jan 14 '16 at 17:00

It appears that there are some problems in your HTML ordering (Move checkbox input outside and before the label)

Using css to target both the label and the checkbox while keeping the checkbox hidden.

#frm_checkbox_83-0 {
  border: 1px solid red;
}
#frm_checkbox_83-0 input[type="checkbox"] {
  display: none;
}
#frm_checkbox_83-0 input[type="checkbox"] + label {
  content: "";
  background: url('http://www.uswebcompany.com/plugins/formidable/wp-content/uploads/2016/01/christmasLights.png') 0 0px no-repeat;
  display: inline-block;
  font-size: 12px;
  height: 75px;
  width: 75px;
  margin: -2px 6px 0 0;
  text-align: center;
  vertical-align: middle;
  border-radius: 10px;
  background-color: #6283B2;
}
#frm_checkbox_83-0 input[type="checkbox"]:checked + label {
  background: url('http://www.uswebcompany.com/plugins/formidable/wp-content/uploads/2016/01/checkmark.png'), url('http://www.uswebcompany.com/plugins/formidable/wp-content/uploads/2016/01/christmasLights.png') 0 0px no-repeat;
  height: 75px;
  width: 75px;
  border-radius: 10px;
  background-color: #37924A;
}

<div class="frm_opt_container">
  <div class="frm_checkbox" id="frm_checkbox_83-0">

    <input type="checkbox" name="item_meta[83][]" id="field_a8mjgv-0" value="Option 1" />
    <label for="field_a8mjgv-0">
      Option 1
    </label>
  </div>
  <div class="frm_checkbox" id="frm_checkbox_83-1">
    <label for="field_a8mjgv-1">
      <input type="checkbox" name="item_meta[83][]" id="field_a8mjgv-1" value="Option 2" />Option 2
    </label>
  </div>
</div>

Replacing checkbox with image

1 Answers1