Custom Checkboxes Failing on Firefox

Question

I'm trying to make custom checkboxes with CSS3, which is working great on Chrome. On Firefox... not so much.

Edit: it seems to be working fine on Firefox 37.

The answer below is still relevant, but the style related issues from mid 2013 are resolved.

IE support isn't mentioned here but edits/answers regarding it are welcome.

demo

The HTML:

<input type="checkbox" id="first"/>
<label for="first">This is pretty awesome</label>

The CSS:

input[type=checkbox] {
  appearance: none;
  background: transparent;
  position: relative;
}
input[type=checkbox]::after {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  text-align: center;
  background: #aaa;
  display: block;
  pointer-events: none;
  opacity: 1;
  color: black;
  border: 3px solid black;
}
input[type=checkbox] + label {
  line-height: 48px;
  margin: 0 15px 0 15px;
}
input[type=checkbox]:hover::after {
  content: '';
  background: #32cd32;
  opacity: .3;
}
input[type=checkbox]:checked::after {
  content: '\2713';
  background: #32cd32;
}
input[type=checkbox]:checked:hover::after {
  opacity: 1;
}
input[type=checkbox],
input[type=checkbox]::after {
  width: 48px;
  height: 48px;
  font-size: 46px;
  line-height: 48px;
  vertical-align: middle;
  border-radius: 50%;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

_{Note: I removed vendor prefixes, and things like user-select for brevity. The full code is in the pen.}

What do I need to change to have it look the same on Firefox as it does on Chrome?

Desired:

Not desired:

Answer 1

You can enable custom styles for checkbox specifically for mozilla browser by adding this property and it worked for me.

-moz-appearance:initial