Is it possbile to make heart shaped input html button/element?

Question

Is it possible to customise regular <input tupe="checkbox"> ?Lets say i want it to be heart shape input element, and that heart changes color when its selected.

I was looking at this 2 articles, first documentation on MDN and i didnt see anything that can help me. Is there something I am missing is this even possbile?

https://stackoverflow.com/questions/17541614/use-images-instead-of-radio-buttons/17541916 — Roko C. Buljan, Sep 16 '21 at 12:21
Does this answer your question? [Should I make HTML Anchors with 'name' or 'id'?](https://stackoverflow.com/questions/484719/should-i-make-html-anchors-with-name-or-id) — Ashish Papanai, Sep 16 '21 at 12:21
Not i has nothing to do with my question. Let me add more descirtiption to question itself. — Mladen Milosavljevic, Sep 16 '21 at 12:24
I'm guessing a combination of searching for "css custom check box" and "css heart shape" would be a good place to start. — David, Sep 16 '21 at 12:27
https://www.w3schools.com/howto/howto_css_custom_checkbox.asp — enno.void, Sep 16 '21 at 12:30
[SVG](https://www.svgrepo.com/svg/13666/heart) or [Unicode](https://www.htmlsymbols.xyz/heart-symbols) could help you aswell. — tacoshy, Sep 16 '21 at 12:49

score 1 · Accepted Answer · answered Sep 16 '21 at 12:55

hide the checkbox itself with input { display none; }. Then add the heart either as SVG or as HTML/Unicode within the label. YOu can use input:checked ~ label as selector to add changes within CSS.

/* hides the checkbox */
input {
  display: none;
}

/* changes the color when selected */
input:checked ~ label {
  color: red;
}



/* for styling purpose only */
label {
  font-size: 5em;
}

<input type="checkbox" id="heart">
<label for="heart">&#9829</label>

Thank you. So i needed to hid checkbox itself and to "fake" it as a label. — Mladen Milosavljevic, Sep 16 '21 at 13:05

Is it possbile to make heart shaped input html button/element?

1 Answers1