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;
}

Violon

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

  1. 16

    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].”

    Le Pseudo-élément définitions ont été déplacés vers d'autres modules, en laissant les Sélecteurs de définir uniquement la syntaxe et de donner un bref résumé de la CSS1 et CSS2 pseudo-éléments. Heureusement, ils vont clarifier la situation pour les ::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

  2. 8

    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 nouveaux content avant ou après l'élément cible de l' content. D'entrée n'ont pas de content; ils ont juste une value. 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.

    Éviter de liaison à l'avant-projet de spécifications qui sont déjà devenus des recommandations, sauf si vous êtes spécifiquement le référencement d'un projet: w3.org/TR/CSS21/generate.html
    Bon appel. Désolé à ce sujet.

    OriginalL'auteur