Question Modifier la couleur d'espace réservé d'une entrée HTML5 avec CSS


Chrome prend en charge le attribut d'espace réservé sur input[type=text] éléments (d'autres le font probablement aussi).

Mais ce qui suit CSS ne fait rien à la valeur de l'espace réservé:

input[placeholder], [placeholder], *[placeholder] {
    color: red !important;
}
<input type="text" placeholder="Value">

Value restera toujours grey au lieu de red.

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


3594
2018-04-09 20:36


origine


Réponses:


la mise en oeuvre

Il existe trois implémentations différentes: pseudo-éléments, pseudo-classes et rien.

  • WebKit, Blink (Safari, Google Chrome, Opera 15+) et Microsoft Edge utilisent un pseudo-élément: ::-webkit-input-placeholder. [Ref]
  • Mozilla Firefox 4 à 18 utilise une pseudo-classe: :-moz-placeholder (un côlon). [Ref]
  • Mozilla Firefox 19+ utilise un pseudo-élément: ::-moz-placeholder, mais l'ancien sélecteur fonctionnera encore pendant un moment. [Ref]
  • Internet Explorer 10 et 11 utilisent une pseudo-classe: :-ms-input-placeholder. [Ref]
  • Avril 2017: La plupart des navigateurs modernes supportent le pseudo-élément simple ::placeholder  [Ref]

Internet Explorer 9 et inférieur ne prend pas en charge le placeholder attribuer du tout, tout en Opera 12 et inférieur ne supportent pas tout sélecteur CSS pour les espaces réservés.

La discussion sur la meilleure mise en œuvre se poursuit. Notez que les pseudo-éléments agissent comme des éléments réels dans le Ombre DOM. UNE padding sur un input n'obtiendra pas la même couleur d'arrière-plan que le pseudo-élément.

Sélecteurs CSS

Les agents utilisateurs doivent ignorer une règle avec un sélecteur inconnu. Voir Sélecteurs Niveau 3:

une groupe des sélecteurs contenant un sélecteur invalide est invalide.

Nous avons donc besoin de règles distinctes pour chaque navigateur. Sinon, tout le groupe serait 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;
}
<input placeholder="Stack Snippets are awesome!">

Notes d'utilisation

  • Veillez à éviter les mauvais contrastes. L'espace réservé de Firefox semble être par défaut avec une opacité réduite, il doit donc utiliser opacity: 1 ici.
  • Notez que le texte de l'espace réservé est simplement coupé s'il ne correspond pas - dimensionnez vos éléments d'entrée dans em et testez-les avec de gros paramètres de taille de police. Ne pas oublier les traductions: quelques langues besoin de plus de place pour le même mot.
  • Navigateurs avec support HTML pour placeholder mais sans support CSS pour cela (comme Opera) devrait être testé aussi.
  • Certains navigateurs utilisent des CSS par défaut supplémentaires pour certains input les types (email, search). Ceux-ci peuvent affecter le rendu de manière inattendue. Utilisez le Propriétés  -webkit-appearance et -moz-appearance pour changer cela. Exemple:
    [type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }

4528
2018-06-06 08:47



/* 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;
}
<input placeholder="hello"/> <br />
<textarea placeholder="hello"></textarea>

Cela donnera du style à tous input et textarea des espaces réservés.

Note importante: Ne regroupez pas ces règles. Au lieu de cela, créez une règle distincte pour chaque sélecteur (un sélecteur non valide dans un groupe rend le groupe entier invalide).


655
2018-02-09 16:44



Vous pouvez également vouloir texturer des zones de texte:

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

260
2017-09-14 12:52



Pour Bootstrap et Moins utilisateurs, il y a un mixin .placeholder:

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

96
2018-02-14 21:11



En plus de la réponse de toscho, j'ai remarqué quelques incohérences de Webkit entre Chrome 9-10 et Safari 5 avec les propriétés CSS supportées qui valent la peine 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 lors du style de l'espace réservé.

La comparaison complète entre plusieurs navigateurs est ici.


92
2018-04-14 02:28



Pour Toupet utilisateurs:

// Create placeholder mixin
@mixin placeholder($color, $size:"") {
  &::-webkit-input-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
  &:-moz-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
  &::-moz-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
  &:-ms-input-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
}

// Use placeholder mixin (the size parameter is optional)
[placeholder] {
  @include placeholder(red, 10px);
}

68
2018-06-25 09:01



Cela fonctionnera bien. DEMO ICI:

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #666;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #666;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #666;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #666;
}
<input type="text" placeholder="Value" />


51
2017-10-08 19:21