將自定義圖片設置為沒有必選標簽的復選框

Question

我有一個項目，其中有時復選框沒有標簽。 對於復選框，我發現設置自定義圖像的唯一方法是設置圖像label:before對應label ，其具有for與價值id復選框。

是否有任何CSS方法（至少是hacky）將自定義圖像設置為復選框而不更改標記？ input[type="checkbox"]:before僅適用於Chrome。

Answer 1

我發現除了IE桌面版（甚至在Edge中）之外，其他所有地方都可以使用的唯一方法是通過設置CSS appearance ：

 input[type="checkbox"] { width: 16px; height: 16px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: red; } input[type="checkbox"]:checked { background-color: green; } 

 <input type="checkbox" /> 

Answer 2

我認為沒有所有瀏覽器的標簽就不可能做到這一點。 我認為標簽是必須的。

但是您可以為此使用JS和icheck之類的庫（以及其他許多 jQuery和純JS）

Answer 3

也許如果您將容器添加到這樣的復選框中

<div>
    <input type="checkbox">
</div>

接着

div{
    position: relative;
    /* Your custom style */
}

input{
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    opacity: 0;
}