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

Question

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.

Answer 1

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

Answer 2

*::-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)

Answer 3

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

Answer 4

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

Answer 5

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.