Firefox checkbox:checked background - css

Question

I am customizing checkbox and I have a problem with the background. In Chrome everything is ok but in Firefox there is no background. There is CSS code with background. Please can you tell me what is wrong?
.box-filter input[type="checkbox"]:checked{
background: #000000;
}

Answer 1

As far as I know, it's not possible in most major browsers, which is why a lot of sites implement their own versions of checkboxes using an image for consistent experience. As for Firefox specifically, there is a bug for it (since CSS2 does stipulate that background-color applies to all elements), but it has been resolved as "Won't Fix".

Answer 2

A good way to do custom checkboxes is with an <a> tag. Then you can style them in all kinds of ways, and have an <input type="hidden" value="0"> accompany each one to store it's value. Then you can access its value in a form submission. jQuery takes care of the actual functionality.
HTML:
<a class="pseudo-checkbox" data-role="checkbox" data-checked="0"></a>
<input type="hidden" name="terms" value="0">
The CSS below demonstrates using :before pseudo element to style the box, slightly smaller than the <a> element itself so that the checkmark can overlap the box. An icon-font is used to add a checkmark which will look great on any screen.
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);
}
});