html - 复选框 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>

问候提莫修斯