Css Firefox复选框：选中背景

我正在自定义复选框，背景有问题。在Chrome中一切正常，但在Firefox中没有背景。有背景的CSS代码。你能告诉我怎么了吗

.box-filter input[type="checkbox"]:checked{
background: #000000;
}

---

据我所知，这在大多数主流浏览器中是不可能的，这就是为什么许多网站使用图像实现自己版本的复选框以获得一致的体验。特别是对于Firefox，它有一个简单的定义（因为它确实规定背景色适用于所有元素），但它已被解析为“无法修复”。

一个很好的自定义复选框的方法是使用

标记。然后，您可以以各种方式设置它们的样式，并让每个样式都附带一个

来存储其值。然后您可以在表单提交中访问它的值。jQuery负责实际的功能

HTML:

HTML:

JS（jQuery）：

$（'a[data role=checkbox]'）。在（'click'，function（）上{
var checked=$（this.attr（'data-checked'）；
var self=$（这是）；
如果（选中==0）{
self.html（“”）；
self.attr（'data-checked'，1）；
self.sibbins（'input'）.val（1）；
}否则{
self.html（“”）；
self.attr（'data-checked'，0）；
self.sibbins（'input'）.val（0）；
}
});

我认为您无法在任何浏览器中设置复选框的背景色。下面的测试显示了Chrome中的一个普通复选框：与Firefox相同。你能提供一张你在Chrome中看到的屏幕截图吗？请查看此问题以获取答案：

<a class="pseudo-checkbox" data-role="checkbox" data-checked="0"></a>
<input type="hidden" name="terms" value="0">

a.pseudo-checkbox {
    margin:0 10px 0 0;
    float:left;
    display:block;
    width:24px;
    height:24px;
    position:relative;
}
a.pseudo-checkbox:before {
    content:"";
    width:16px;
    height:16px;
    position: absolute;
    z-index: 0;
    left:0;
    bottom:2px;
    display:block;
    border:1px #868686 solid;
    background-color:white;
}
a.pseudo-checkbox:active:before {
    background-color:gray;
}
a.pseudo-checkbox i.icon-checkmark {
    position: absolute;
    z-index:1;
    color:#028208;
    float:none;
    margin:0;
    font-size:18px;
    top:0;
    left:2px;
}

$('a[data-role=checkbox]').on('click', function() {
    var checked = $(this).attr('data-checked');
    var self = $(this);
    if (checked == 0) {
        self.html('<i class="icon-checkmark"></i>');
        self.attr('data-checked', 1);
        self.siblings('input').val(1);
    } else {
        self.html('');
        self.attr('data-checked', 0);
        self.siblings('input').val(0);
    }
});