Caselle personalizzate non funzionanti su Firefox

Question

Sto provando a creare caselle di controllo personalizzate con CSS3, che funziona perfettamente su Chrome. Su Firefox ... non così tanto.

Edit: sembra funzionare bene su Firefox 37.

La risposta che segue è ancora rilevante, ma le questioni legati agli stili da metà del 2013 sono stati risolti.

IE supporto non è menzionato qui ma le modifiche/risposte in merito sono ben accette.

demo

Il codice HTML:

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

Il 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: ho rimosso prefissi vendor, e le cose come user-select per brevità. Il codice completo è nella penna.}

Cosa devo cambiare per avere lo stesso aspetto su Firefox come su Chrome?

desiderata:

Non desiderare:

Answer 1

sono riuscito a risolvere il problema il più sembra possibile (avevo ancora l'amore una soluzione migliore, se ne esiste uno). Sono passato tutti i selettori da

input[type=checkbox]::after 

a

input[type=checkbox] + label::after 

Unico inconveniente:

• richiede un'etichetta

Ma:

• HTML richiede elementi di input per avere un'etichetta

Conclusione:

• solo un male per HTML non valido

Answer 2

doesnt tecnicamente necessita di un'etichetta, ma ha bisogno di controllo sul mark up a assicurati che ci sia un fratello target-capable immediatamente dopo la casella di controllo.

, ad es.

input[type=checkbox] + span::after{ 
 
    display:block; 
 
    width:50px; 
 
    height:50px; 
 
    background:yellow; 
 
    display:block; 
 

 
} 
 

 
input[type=checkbox]:checked + span::after{ 
 
    display:block; 
 
    width:50px; 
 
    height:50px; 
 
    background:yellow; 
 
    display:block; 
 

 
}

<input type="checkbox"></input> 
 
    <span class="targetMe"></span>

bersaglio campata utilizzando il selettore fratelli e: after elementi come sopra.

Potrebbe anche mettere in un tho un'etichetta a questo punto ...: P

Answer 3

Il problema è che :after e ::after creare tecnicamente un elemento come ultimo bambino dell'elemento del pseudoselector viene applicato. A Firefox non piace creare bambini all'interno delle sue caselle di controllo. Questo è in realtà parte di un argomento più ampio che è replaced elements.

Si vedrà lo stesso problema con le :before e ::before pseudoelements non funziona su caselle di controllo perché avrebbero creare elementi come un primo elemento bambino all'interno dell'elemento essere selezionato.