Est le :avant de pseudo-élément admis sur un input[type=checkbox]?
Cette StackOverflow répondre décrit comment le style des cases à cocher à l'aide de CSS3, sans exiger de <label>
:
input[type=checkbox]:before {
content:""; display:inline-block; width:12px; height:12px; background:red;
}
Cela fonctionne dans Chrome 22 mais pas dans Firefox 15 ou IE 9.
Étant donné le manque de soutien dans les deux derniers navigateurs, est le Chrome du comportement valide conformément à la spécification CSS3?
OriginalL'auteur Michael Liu | 2012-10-11
Vous devez vous connecter pour publier un commentaire.
C'est uncharted terre; les spécifications ne sont pas clairement les choses. Le CSS 2.1 spécification dit: “Nota. Cette spécification ne pas définir complètement l'interaction de :before et :after avec remplacée éléments (tels que des IMG en HTML). Ce sera définie plus en détail dans un futur cahier des charges.” Et, ce qui reste discutable, d'ENTRÉE pourrait être considéré comme un remplacer l'élément en CSS 2.1 sens.
On pourrait penser que ces pseudo-éléments ne peuvent pas être utilisés pour les éléments qui ne peuvent pas avoir n'importe quel contenu (c'est à dire, avec VIDE de contenu déclaré), comme l'IMG ou d'ENTRÉE. Toutefois, le libellé mentionne IMG, et L'Annexe D a une règle avec le sélecteur
br:before
.Et des Sélecteurs CSS3, l'une des rares parties de CSS3 qui ont atteint le statut de recommandations, ne pas de clarifier les choses. Il dit: “L' ::before et ::after pseudo-éléments peut être utilisé pour décrire le contenu généré avant ou après un élément de contenu. Elles sont expliquées dans CSS 2.1 [CSS21].”
::before
et::after
dans le module correspondant (peut-être le légendaire réécriture de l'Générés/a Remplacé le Contenu de Niveau 3 module).Un jour sur cette?
OriginalL'auteur
Je pense que google Chrome, le comportement n'est pas valide. Si vous jetez un oeil ici, il est dit que le
::before
et::after
éléments pseudo ajouter de nouveauxcontent
avant ou après l'élément cible de l'content
. D'entrée n'ont pas decontent
; ils ont juste unevalue
. Vous ne pouvez pas, par exemple, ne<input>Pasta</input>
.Si tout cela est vrai, alors il semble que google Chrome, le comportement n'est pas valide, alors que IE et Firefox sont corrects.
Bon appel. Désolé à ce sujet.
OriginalL'auteur