How to make a custom checkbox with image? [duplicate]

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:

@justDan Yes it did! Particularly this answer: stackoverflow.com/a/13953070/9136921 — Sth
– Sth, Commented Nov 27, 2019 at 8:49

Josep Vidal · Accepted Answer · 2019-11-26 17:21:06Z

0

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.

answered Nov 26, 2019 at 17:21

Josep Vidal

2,7012 gold badges19 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to make a custom checkbox with image? [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related