How to make a custom checkbox with image?

Question

I need to create a checkbox with an image in it, instead of regular checkmark. It should look like this, [ticked]:

[Unticked]:

Here is the code of the element:

.modal-options label {
  color: #f62b3e;
  font-family: sharp-20-regular;
  font-size: 17px;
  text-align: center;
  user-select: none;
  cursor: pointer;
  position: relative;
  padding-left: 5%;
  margin-bottom: 12px;
}

.modal-options input {
  width: 100%;
  cursor: pointer;
  height: 40px;
  width: 40px;
  background-color: transparent;
  border: 1px solid #f62b3e;
}

.modal-options input:checked {
  background-position: right center;
}

.checkmark {
  background-image: url(assets/images/checkbox-smile.svg);
  background-position: left center;
  background-size: auto 100%;
  background-repeat: no-repeat;
  height: 25px;
  width: 25px;
}

      

  <label>
       <input type="checkbox" />
       <span class="checkmark"></span>
       <br />
       Just curious
</label>

This is what I have currently:

[Try this](https://codepen.io/jouanmarcel/pen/MXdreK) link , it's very helpful — pavan kumar, Nov 26 '19 at 17:21
@justDan Yes it did! Particularly this answer: https://stackoverflow.com/a/13953070/9136921 — Sth, Nov 27 '19 at 08:49

score 0 · Answer 1 · answered Nov 26 '19 at 17:21

You could create a <div> and put the checkbox inside that <div>.

Then first use the background property to set an image as background in this parent div, that fills the entire element. Then, make the checkbox big as the parent element, after that, change the opacity of the checkbox to 0.

If you did all of that right, once the user clicks the image, the checkbox will be also clicked.

How to make a custom checkbox with image?

1 Answers1