Question

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

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

Answer 1

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

Answer 2

自定义复选框的一种好方法是使用<a>标记。然后你可以用各种方式设置它们的样式，并且每个都有一个<input type="hidden" value="0">来存储它的值。然后，您可以在表单提交中访问其值。 jQuery负责实际的功能。

HTML：

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

下面的CSS演示了使用:before伪元素来设置框的样式，略小于<a>元素本身，以便复选标记可以与框重叠。图标字体用于添加一个在任何屏幕上看起来都很棒的复选标记。

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;
}

HTML：

JS（jQuery）：

$('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);
    }
});

Firefox复选框：选中后台

2 个答案: