Changer la couleur de l'espace réservé d'une entrée HTML à l'aide de CSS

Question

Chromev4 prend en charge les attributs d'espace réservé sur les éléments input[type=text] (d'autres peuvent faire de même). Cependant, le CSS suivant ne fait rien avec la valeur de l'espace réservé : input[placeholder],[placeholder],*[placeholder]{color:red!important;}<inputtype="text"placeholder="Value"&gt

P粉680087550 · Answer

/* do not group these rules */
*::-webkit-input-placeholder {
    color: red;
}
*:-moz-placeholder {
    /* FF 4-18 */
    color: red;
    opacity: 1;
}
*::-moz-placeholder {
    /* FF 19+ */
    color: red;
    opacity: 1;
}
*:-ms-input-placeholder {
    /* IE 10+ */
    color: red;
}
*::-ms-input-placeholder {
    /* Microsoft Edge */
    color: red;
}
*::placeholder {
    /* modern browser */
    color: red;
}

Cela stylisera tous les input和textareaespaces réservés.

Important : Ne regroupez pas ces règles. Au lieu de cela, créez des règles distinctes pour chaque sélecteur (un sélecteur invalide dans un groupe invalide l'ensemble du groupe).

P粉765684602 · Answer

Mise en œuvre

Il existe trois implémentations différentes : pseudo-élément, pseudo-classe et aucune.

WebKit, Blink (Safari, Google Chrome, Opera 15+) et Microsoft Edge utilisent des pseudo-éléments : ::-webkit-input-placeholder. ^{[référence]}
Mozilla Firefox 4 à 18 utilise la pseudo-classe : :-moz-placeholder (a colon). ^{[référence]}
Mozilla Firefox 19+ utilise le pseudo-élément : ::-moz-placeholder, mais l'ancien sélecteur fonctionnera encore pendant un certain temps. ^{[Référence]}
Internet Explorer 10 et 11 utilisent la pseudo-classe : :-ms-input-placeholder. ^{[Référence]}
Avril 2017 : La plupart des navigateurs modernes prennent en charge les pseudo-éléments simples ::placeholder ^[Ref]

Internet Explorer 9 et versions antérieures ne prennent pas du tout en charge l'attribut placeholder, tandis que Opera 12 et versions antérieures ne prennent en charge aucun sélecteur CSS d'espace réservé.

Les discussions sur les meilleures options de mise en œuvre se poursuivent. Notez que les pseudo-éléments se comportent comme de vrais éléments dans le shadow DOM. input 上的 padding n'obtiendra pas la même couleur d'arrière-plan que le pseudo-élément.

Sélecteur CSS

Les agents utilisateurs doivent ignorer les règles avec des sélecteurs inconnus. Voir Sélecteur Niveau 3 :

Nous devons donc établir des règles distinctes pour chaque navigateur. Sinon, l'ensemble du groupe sera ignoré par tous les navigateurs.

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #909;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #909;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #909;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #909;
}

::placeholder { /* Most modern browsers support this now. */
   color:    #909;
}