forma di checkbox in forma css con tag selezionati e dopo

Question

Sto provando a progettare un modulo senza utilizzare JavaScript o JQuery. Include una serie di checkbox. L'idea è di mostrare una certa gif dopo la casella di controllo se è deselezionata. Altrimenti, non visualizzare nulla dopo di esso. Questo è il codice che ho:

input[type=checkbox]::after 
{ 
    content: url(images/unchecked_after.gif); 
    position:relative; 
    left:15px; 
    z-index:100; 
} 
input[type=checkbox]:checked::after 
{ 
    content:""; 
} 

Funziona in Chrome ma non sembra funzionare in Firefox o IE. Che c'è?

Answer 1

La soluzione cross-browser che ha funzionato per me era quella di includere un'etichetta vuota (con classe "checkbox_label") dopo l'input della casella di controllo e quindi lo stile IT anziché la casella di controllo.

input[type=checkbox] + label:after 
{ 
    content: url(images/unchecked_after.gif); 
    position:relative; 
    left:0px; 
    top:1px; 
    z-index:100; 
} 

input[type=checkbox]:checked + label:after 
{ 
    content:""; 
} 

.checkbox_label 
{ 
    height:0px; 
    width:0px; 
    display:inline-block; 
    float:left; 
    position:relative; 
    left:20px; 
    z-index:100; 
} 

Answer 2

Apparentemente, l'uso degli pseudo-elementi ::before e ::after non è supportato dalle specifiche. La tua domanda ha una risposta here. Spero possa aiutare!