复选框 Mozilla 跨浏览器问题

Question

我在 Mozilla 上的复选框遇到了一些问题。该复选框（在http://apespark.com/formifyPro/examples/login.html 上）在 Chrome 上完全可以正常工作，但在 Mozilla 上它看起来像默认复选框。我尝试并添加了-moz-appeareance: none，但似乎它没有读取伪（::before 和::after）元素。我真的不明白为什么它没有按预期显示。

Answer 1

您应该设置标签而不是输入字段的样式。

label {
    display: inline-block;
    cursor: pointer;
    // your styles here for text.

}
label:before {
    content:"";
    // styles here for the actual checkbox
}
input[type=checkbox] {
    display: none;
}
input[type=checkbox]:checked + label:before {
    content:"";
    // styles here when checkbox is checked
}

为了安全起见，您应该像您一样从包装标签更改您的 html

<label><input /></label>

到一个像这样的引用

<input id="myInput" />
<label for="myInput"></label>

问候提摩太