如何使我的復選框透明

Question

如何使我的復選框透明？ 它確實適用於文本字段和按鈕，但似乎不適用於復選框。 這是我的代碼的形式。

 #checkbox { width: 20px; height: 20px; cursor: pointer; vertical-align: bottom; color: black; background-color: rgba(0, 0, 0, 0.08); } 

 <div class="checkbox check-transparent"> <label> <input type="checkbox" id="checkbox">Onthoud mij </label> </div> 

Answer 1

常規復選框唯一可以做的就是通過降低其不透明度使其透明，但如果選中，它也可以減輕內部的刻度線。 一種解決方法是，將復選框包裝在div中，並在選中時更改復選框的顏色，如下面的代碼片段所示：

 #checkb { width: 20px; height: 20px; cursor: pointer; background: rgba(40,40,40,0.2); color:black; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; position: relative; left: -5px; top: -5px; } #checkb:checked { background: rgba(40,40,40,0.7); } .checkbox-container { position: absolute; display: inline-block; margin: 20px; width: 100px; height: 100px; overflow: hidden; } 

 <div class="checkbox-container"> <input type="checkbox" id="checkb"/> Input </div> 

Answer 2

您還可以（允許按照標准重新設置復選框跨瀏覽器樣式的經典方法）

• 在label前和label外input

• 鏈接label通過屬性來其輸入for

• 使用偽上label通過CSS繪制一個復選框，並應用大小和背景。

• 隱藏復選框

 label { display: inline-block; } #checkbox { display: none; } label:before { content: ''; cursor: pointer; vertical-align: bottom; color: black; background-color: rgba(0, 0, 0, 0.1); /* average checkbox styling */ line-height: 1.1em; font-weight: bold; text-align: center; font-size: 20px; height: 20px; width: 20px; display: inline-block; box-shadow: inset 0 0 1px 1px rgb(153, 154, 154), inset 0 0 1px 2px white, inset 0 0 1px 2px white, inset 2px 2px 1px 1px rgb(182, 187, 192), inset -1px -1px 2px 1px rgb(182, 187, 192), inset 8px 8px 4px -4px rgb(182, 187, 192); box-sizing: border-box; } :checked+label:before { content: '\\2713'; color: rgb(74, 95, 151); } :checked+label { color: rgb(74, 95, 151); } label:hover { color: rgb(28, 50, 125); } label:hover:before { box-shadow: inset 0 0 1px 1px rgb(95, 133, 156), inset 0 0 1px 2px rgb(198, 237, 252), inset 0 0 1px 2px rgb(198, 237, 252), inset 2px 2px 1px 1px rgb(134, 203, 246), inset -1px -1px 2px 1px rgb(134, 203, 246), inset 8px 8px 4px -4px rgb(134, 203, 246); } 

 <div class="checkbox check-transparent"> <input type="checkbox" id="checkbox"> <label for="checkbox"> Onthoud mij </label> </div>