css - 从定制的复选框中删除框

Question

我创建了如下所示的自定义样式复选框：

我想要的是从复选框中删除框，并在单击时为按钮赋予新颜色，如下所示：

怎么可能做到这一点？使用纯 CSS？

生成的html：

<p>
    Huvudområden:
    <label><input class="{category: true}" type="checkbox" name="category[]" value="40" id="grade40">Musicerande</label>
    <label><input class="{category: true}" type="checkbox" name="category[]" value="42" id="grade42">Musikens sammanhang</label>
    <label><input class="{category: true}" type="checkbox" name="category[]" value="41" id="grade41">Musikens verktyg</label>
</p>

Answer 1

您可以使用所谓的复选框 hack。

如您所见，诀窍是使用这种定位隐藏复选框：

input[type=checkbox] {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

然后您使用label来切换复选框！