¿Está permitido el pseudo-elemento antes de una entrada [type = checkbox]?

Question

This StackOverflow answer describe cómo Estilo casillas de verificación utilizando CSS3 sin necesidad de un <label>:

input[type=checkbox]:before { 
    content:""; display:inline-block; width:12px; height:12px; background:red; 
} 

Fiddle

Esto funciona en Chrome 22, pero no en Firefox o IE 9. 15

Dada la falta de apoyo en los dos últimos navegadores, , ¿el comportamiento de Chrome es válido según la especificación CSS3?

Answer 1

Esta es una tierra inexplorada; las especificaciones no aclaran las cosas. El CSS 2.1 spec says: "Nota. Esta especificación no define completamente la interacción de: before y: after con los elementos reemplazados (como IMG en HTML). Esto se definirá con más detalle en una especificación futura. "Y, discutiblemente, INPUT podría verse como replaced element in CSS 2.1 sense.

Podría pensarse que estos pseudo-elementos no pueden usarse para elementos que no pueden tener ningún contenido (es decir, con contenido declarado VACÍO), como IMG o INPUT. Sin embargo, la redacción menciona IMG y Appendix D tiene una regla con el selector br:before.

Y los selectores CSS3, una de las pocas partes de CSS3 que han alcanzado el estado de recomendación, no no aclaran las cosas. It says: "Los pseudo-elementos :: :: before y :: after se pueden usar para describir el contenido generado antes o después del contenido de un elemento. Se explican en CSS 2.1 [CSS21]. "

Answer 2

Creo que el comportamiento de Chrome no es válido. Si tiene take a look here, dice que los pseudo elementos ::before y ::after agregan el nuevo content antes o después del elemento content del elemento de destino. Los elementos de entrada no tienen content; solo tienen un value. No puede, por ejemplo, hacer <input>Pasta</input>.

Si todo esto es cierto, parecería que el comportamiento de Chrome no es válido, mientras que IE y Firefox son correctos.