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

Answer 2

appearance: none;  /* doesn't work for firefox

如果要为复选框设置样式。你需要通过JavaScript或jQuery使用图像进行检查和取消选中

https://bugzilla.mozilla.org/show_bug.cgi?id=605985

复选框没有在Firefox中设置样式但Chrome很好

2 个答案: