4051 votes

Modifier une entrée du HTML5 espace réservé couleur avec CSS

Chrome prend en charge l' attribut placeholder sur input[type=text] éléments (d'autres sans doute aussi).

Mais le CSS ne fait pas de diddly squat à l'espace réservé de la valeur:

CSS:

input[placeholder], [placeholder], *[placeholder] {
   color:red !important;
}

HTML:

<input type="text" placeholder="Value" />

Value restera gris au lieu de rouge.

Est-il un moyen de changer la couleur du texte de l'espace réservé?

Je suis déjà à l'aide de jQuery espace réservé plugin pour les navigateurs qui ne supportent pas l'espace réservé de l'attribut de mode natif.

4866voto

toscho Points 29302

La mise en œuvre

Il y a trois implémentations différentes: les pseudo-éléments, les pseudo-classes, et de rien.

  • WebKit et Blink (Safari, Google Chrome, Opera 15+) sont en utilisant un pseudo-élément: ::-webkit-input-placeholder.
  • Mozilla Firefox 4 à 18 ans est à l'aide d'un pseudo-classe: :-moz-placeholder (un virgule).
  • Mozilla Firefox 19+ est à l'aide d'un pseudo-élément: ::-moz-placeholder, mais l'ancien sélecteur continuera de fonctionner pendant un certain temps.
  • Internet Explorer 10 est à l'aide d'un pseudo-classe: :-ms-input-placeholder.

C'est à dire vers la version 9 et de l'Opéra jusqu'à la version 12 ne prennent pas en charge tout le sélecteur CSS pour les espaces réservés.

Les discussion à propos de la meilleure mise en œuvre est toujours en cours. Remarque les pseudo-éléments agissent comme des éléments réels dans l' Ombre DOM. Un padding sur input n'obtiendrez pas la même couleur de fond que le pseudo-élément.

Les sélecteurs CSS

Les agents utilisateurs sont tenus d'ignorer une règle avec un inconnu sélecteur. Voir Les Sélecteurs De Niveau 3:

un groupe de sélecteurs contenant une défaillance de sélecteur n'est pas valide.

Nous avons donc besoin de règles distinctes pour chaque navigateur. Sinon, tout le groupe sera ignoré par tous les navigateurs.

::-webkit-input-placeholder { /* WebKit browsers */
    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+ */
   color:    #909;
}
<input placeholder="Stack Snippets are awesome!">

Notes d'utilisation

  • Soyez prudent pour éviter les mauvaises contrastes. Firefox est un espace réservé semble être défaillant à une réduction de l'opacité, il faut donc utiliser opacity: 1 ici.
  • Notez que le texte de l'espace réservé est juste coupée si elle ne rentre pas de la taille de vos éléments d'entrée en em et les tester avec de grandes taille minimale de la police des paramètres. N'oubliez pas de traductions: certaines langues ont besoin de plus de place pour le même mot.
  • Les navigateurs avec support HTML pour placeholder mais sans le support de CSS pour que (comme Opera) doit être testé.
  • Certains navigateurs utilisation des CSS par défaut pour certains input types (email, search). Ceux-ci pourraient affecter le rendu de manière inattendue. Utiliser les propriétés de l' -webkit-appearance et -moz-appearance de changement. Exemple:
    [type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }

735voto

brillout.com Points 2289
*::-webkit-input-placeholder {
    color: red;
}
*:-moz-placeholder {
    /* FF 4-18 */
    color: red;
}
*::-moz-placeholder {
    /* FF 19+ */
    color: red;
}
*:-ms-input-placeholder {
    /* IE 10+ */
    color: red;
}

Ce sera le style de tous, input et textarea d'espaces réservés.

JSFiddle Démo

Ne pas regrouper ces règles et de faire une règle distincte pour chaque sélecteur (un invalide sélecteur dans un groupe rend l'ensemble du groupe non valide)

285voto

Matt Points 1035

Vous pouvez également le style de ces zones de texte:

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #636363;
}
input:-moz-placeholder, textarea:-moz-placeholder {
  color: #636363;
}

109voto

Paweld2 Points 411

Pour bootstrap MOINS d'utilisateurs, il y a un mixin .espace réservé:

// Placeholder text
// -------------------------
.placeholder(@color: @placeholderText) {
  &:-moz-placeholder {
    color: @color;
  }
  &:-ms-input-placeholder {
    color: @color;
  }
  &::-webkit-input-placeholder {
    color: @color;
  }
}

103voto

John Catterfeld Points 6614

En plus de toscho réponse j'ai remarqué que certains webkit incohérences entre Chrome 9-10 et Safari 5 avec les propriétés CSS soutenu qui méritent d'être notées.

Plus précisément Chrome 9 et 10 ne prennent pas en charge background-color, border, text-decoration et text-transform lorsque le style de l'espace réservé.

La totalité de la croix-navigateur comparaison est ici.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X