Replacing checkbox with background image in Firefox

I have CSS that replaces a checkbox with a background image. I'm using :before and I realize that this will not work in Firefox. It does work in Chrome. Is there any way I can adjust my CSS so that I don't have to add an element to every one of my checkboxes and replace the CSS accordingly? Below is my code.

CSS

// Checkbox
input[type=checkbox] {
  content: "";
  visibility: hidden;
  height: 21px;
}

input[type=checkbox]:before {
    opacity: 1.0;
    content:"";
    display:inline-block;
    visibility: visible;
    // image-url is a method provided by Rails. Keep calm and carry on.
    background: image-url("checkboxes/Grey-Checkbox.png") -5px -5px no-repeat;
    height: 27px;
    width: 27px;
}

input[type=checkbox]:checked:before  {
    background: image-url("checkboxes/Red-Checkbox.png") -5px -5px no-repeat;
    height: 27px;
    width: 27px;
    padding: 0 0 0 0px;
}

HTML