是否有可能使心形输入html按钮/元素?

Question

是否可以自定义常规<input tupe="checkbox">?假设我想要它是心形输入元素，并且当它被选中时心脏会改变颜色。

我在看这2篇文章，第一个文档在MDN和我没有看到任何可以帮助我。我是不是漏掉了什么这可能吗?

Answer 1

用input { display none; }隐藏复选框本身。然后在标签中以SVG或HTML/Unicode的形式添加心脏。你可以使用input:checked ~ label作为选择器在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>