将自定义图片设置为没有必选标签的复选框

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;
}