html - 复选框在 Firefox 中没有样式，但在 Chrome 中很好

Question

我有一个复选框，我在 css 中设置了样式，但没有使用任何标签选择器。我将在一个有 10 个复选框且周围没有标签的页面上使用它，因此不能使用任何代码。

我在 Chrome 上运行良好，但 FireFox 29 无法正确呈现复选框，我不确定为什么!

我在这里创建了一个代码笔。 http://codepen.io/anon/pen/ACKrH

HTML

<div>
      <input type="checkbox" value="None" id="cb" name="check" checked />
      <label for="cb">My label</label>
</div>

CSS

input[type="checkbox"] {
    -webkit-appearance: none !important;
    -moz-appearance:    none !important;
    appearance:         none !important;
    background-color: #dde1e2;
    border-radius: 5px;
    padding: 8px;
    margin-bottom: 0;
    display: inline-block;
    position: relative;
    cursor: pointer;
    height: 20px;
    width: 20px;
}

input[type="checkbox"]:active,
input[type="checkbox"]:checked:active {
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}

input[type="checkbox"]:checked {
    background-color: #5fa8cf;
    border: 1px solid #5fa8cf;
    color: #777;
}

input[type="checkbox"]:checked:after {
    content: '\2714';
    font-size: 14px;
    position: absolute;
    top: 0px;
    left: 3px;
    color: white;
}

有什么想法吗？

Answer 1

这是 Firefox 中的一个已知错误:https://bugzilla.mozilla.org/show_bug.cgi?id=605985

更新: 我发现了这个:Custom CSS3 Checkbox doesn't work on Firefox or IE