從定製的複選框刪除框

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。

正如你所看到的伎倆是使用這種positionning的隱藏複選框：

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

然後使用label來切換複選框！