从自定义复选框中删除框

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

您可以使用所谓的checkbox hack。

正如您所看到的，诀窍是使用这种定位来隐藏复选框：

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

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