html - -moz-外观 :none still displays a checkbox

Question

我想为以下字段创建一个自定义复选框:

<label class="cmfchklabel"><input type="checkbox" id="cmf-2" name="cmf[2][value][]" value="true" checked>New Year\'s Eve</label>

该字段是通过插件填充的，因此我无法更改该基本标记。

我想出了如何在 webkit 浏览器中更新复选框的外观，但 Firefox 一直显示一个复选框，即使我设置了 -moz-appearance:none;。

如何在不更改基本标记的情况下使用 CSS 更新 Firefox 中复选框的外观？

作为引用，这是我当前的复选框 CSS:

input[type="checkbox"],input[type="checkbox"]:checked {
    -moz-appearance:none;
    -webkit-appearance: none;
    appearance: none;
    border:none;
    outline: none;
}

input[type="checkbox"]:checked:before {
    background:#177dc0;
}

input[type="checkbox"]:before {
    content:'';
    background:#361512;
    display:inline-block;
    height:11px;
    width:11px;
    margin-right:1px;
}

Here's my problem in fiddle .

谢谢。

Answer 1

none 似乎不是 -moz-appearance 的有效选项.

Do not use this property on Web sites: not only is it non-standard, but its behavior changes from one browser to another. Even the keyword none does not have the same behavior on each form element across different browsers, and some do not support it at all.

事实上，Firefox 似乎不会在您的文本框输入中接受任何 CSS。参见 this fiddle ，它在 Chrome 中显示 :before 文本，但在 Firefox (v24) 中不显示。