Estou tentando criar caixas de seleção personalizadas com o CSS3, que funciona muito bem no Chrome. No Firefox ... não tanto.

Edit: parece estar funcionando bem no Firefox 37.

A resposta abaixo ainda é relevante, mas as questões relacionadas ao estilo de meados de 2013 foram resolvidas.

O suporte do IE não é mencionado aqui, mas as edições / respostas sobre ele são bem-vindas.

demonstração

O HTML:

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

O 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: Eu removi prefixos de fornecedores e coisas como seleção de usuário para brevidade. O código completo está na caneta.

O que preciso mudar para ter a mesma aparência no Firefox e no Chrome?

Desejado:

Não desejado: