Estoy intentando crear casillas de verificación personalizadas con CSS3, que funciona muy bien en Chrome. En Firefox ... no tanto.

Edición: parece estar funcionando bien en Firefox 37.

La respuesta a continuación sigue siendo relevante, pero los problemas relacionados con el estilo de mediados de 2013 se han resuelto.

El soporte de IE no se menciona aquí, pero las ediciones / respuestas relacionadas con él son bienvenidas.

manifestación

El HTML:

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

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

Nota: eliminé los prefijos de los proveedores y cosas como la selección por el usuario para mayor brevedad. El código completo está en la pluma.

¿Qué debo cambiar para que se vea igual en Firefox que en Chrome?

Deseado:

No deseado