Changer la couleur de l'espace réservé d'une entrée HTML5 avec CSS

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

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

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

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

Valuerestera toujours à la greyplace de red.

Existe-t-il un moyen de modifier la couleur du texte d'espace réservé?

la mise en oeuvre

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

• WebKit, Blink (Safari, Google Chrome, Opera 15+) et Microsoft bord utilisent un pseudo-élément: ::-webkit-input-placeholder. ^{[ Réf ]}
• Mozilla Firefox 4 à 18 utilise une pseudo-classe: :-moz-placeholder( un deux-points). ^{[ Réf ]}
• Mozilla Firefox 19+ utilise un pseudo-élément:, ::-moz-placeholdermais l'ancien sélecteur fonctionnera encore pendant un certain temps. ^{[ Réf ]}
• Internet Explorer 10 et 11 utilisent un pseudo-classe: :-ms-input-placeholder. ^{[ Réf ]}
• Avril 2017: la plupart des navigateurs modernes prennent en charge le simple pseudo-élément ::placeholder ^{[ Ref ]}

Internet Explorer 9 et versions antérieures ne prennent pas du tout en charge l' placeholderattribut, tandis qu'Opera 12 et versions antérieures ne prennent en charge aucun sélecteur CSS pour les espaces réservés.

La discussion sur la meilleure mise en œuvre est toujours en cours. Notez que les pseudo-éléments agissent comme de vrais éléments dans le Shadow DOM . Un paddingsur un inputn'obtiendra pas la même couleur de fond 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 :

un groupe de sélecteurs contenant un sélecteur non valide n'est pas valide.

Nous avons donc besoin de règles distinctes pour chaque navigateur. Sinon, l'ensemble du 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

• Attention à éviter les mauvais contrastes. L'espace réservé de Firefox semble être par défaut avec une opacité réduite, il doit donc être utilisé opacity: 1ici.
• Notez que le texte d'espace réservé est simplement coupé s'il ne convient pas - redimensionnez vos éléments d'entrée emet testez-les avec de grands paramètres de taille de police minimale. N'oubliez pas les traductions: certaines langues ont besoin de plus d'espace pour le même mot.
• Les navigateurs avec prise en charge HTML placeholdermais sans prise en charge CSS (comme Opera) doivent également être testés.
• Certains navigateurs utilisent du CSS par défaut supplémentaire pour certains inputtypes ( email, search). Ceux-ci peuvent affecter le rendu de manière inattendue. Utilisez les propriétés -webkit-appearance et -moz-appearancepour changer cela. Exemple:

    [type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }

/* 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 stylisera tous inputet les textareaespaces réservés.

Remarque 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 non valide).

Vous pouvez également créer des zones de texte:

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

Pour les utilisateurs Bootstrap et Less , il existe un mixplace .placeholder:

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

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

Plus précisément Chrome 9 et 10 ne prennent pas en charge background-color, border, text-decorationet text-transformen dénommant l'espace réservé.

La comparaison complète entre les navigateurs est ici .

Pour les utilisateurs de Sass :

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

Cela fonctionnera bien. DÉMO 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" />

Dans Firefox et Internet Explorer, la couleur de texte d'entrée normale remplace la propriété color des espaces réservés. Nous devons donc

::-webkit-input-placeholder { 
    color: red; text-overflow: ellipsis; 
}
:-moz-placeholder { 
    color: #acacac !important; text-overflow: ellipsis; 
}
::-moz-placeholder { 
    color: #acacac !important; text-overflow: ellipsis; 
} /* For the future */
:-ms-input-placeholder { 
    color: #acacac !important; text-overflow: ellipsis; 
}

Solution multi-navigateur:

/* all elements */
::-webkit-input-placeholder { color:#f00; }
::-moz-placeholder { color:#f00; } /* firefox 19+ */
:-ms-input-placeholder { color:#f00; } /* ie */
input:-moz-placeholder { color:#f00; }

/* individual elements: webkit */
#field2::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

/* individual elements: mozilla */
#field2::-moz-placeholder { color:#00f; }
#field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

Crédits: David Walsh

Utilisez le nouveau ::placeholdersi vous utilisez le préfixe automatique .

Notez que le mixin .placeholder de Bootstrap est déconseillé en faveur de cela.

Exemple:

input::placeholder { color: black; }

Lorsque vous utilisez le préfixe automatique, ce qui précède sera converti en le code correct pour tous les navigateurs.

Nous avons maintenant un moyen standard d'appliquer CSS à l'espace réservé d'une entrée: le ::placeholderpseudo-élément de ce brouillon de module CSS de niveau 4.

Je viens de réaliser quelque chose pour Mozilla Firefox 19+ que le navigateur donne une valeur d'opacité pour l'espace réservé, donc la couleur ne sera pas ce que vous voulez vraiment.

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #eee; opacity:1;
}
input:-moz-placeholder, textarea:-moz-placeholder {
    color: #eee; opacity:1;
}
input::-moz-placeholder, textarea::-moz-placeholder {
    color: #eee; opacity:1;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    color: #eee; opacity:1;
}

J'écrase le opacitypour 1, donc ce sera bien d'y aller.

Je ne me souviens pas où j'ai trouvé cet extrait de code sur Internet (il n'a pas été écrit par moi, je ne me souviens pas où je l'ai trouvé, ni qui l'a écrit).

$('[placeholder]').focus(function() {
        var input = $(this);
        if (input.val() == input.attr('placeholder')) {
            input.val('');
            input.removeClass('placeholder');
        }
    }).blur(function() {
        var input = $(this);
        if (input.val() == '' || input.val() == input.attr('placeholder')) {
            input.addClass('placeholder');
            input.val(input.attr('placeholder'));
        }
    }).blur();
    $('[placeholder]').parents('form').submit(function() {
        $(this).find('[placeholder]').each(function() {
            var input = $(this);
            if (input.val() == input.attr('placeholder')) {
                input.val('');
            }
        })
    });

Chargez simplement ce code JavaScript, puis modifiez votre espace réservé avec CSS en appelant cette règle:

form .placeholder {
   color: #222;
   font-size: 25px;
   /* etc. */
}

Je pense que ce code fonctionnera car un espace réservé n'est nécessaire que pour le texte de type d'entrée. Donc, ce CSS d'une ligne sera suffisant pour votre besoin:

input[type="text"]::-webkit-input-placeholder {
    color: red;
}

Pour les utilisateurs de Bootstrap , si vous utilisez class="form-control", il peut y avoir un problème de spécificité CSS. Vous devriez obtenir une priorité plus élevée:

.form-control::-webkit-input-placeholder {
    color: red;
}
//.. and other browsers

Ou si vous utilisez Less :

.form-control{
    .placeholder(red);
}

Si vous utilisez Bootstrap et que vous ne parvenez pas à le faire fonctionner, vous avez probablement manqué le fait que Bootstrap lui-même ajoute ces sélecteurs. Il s'agit de Bootstrap v3.3 dont nous parlons.

Si vous essayez de modifier l'espace réservé dans une classe CSS .form-control, vous devez le remplacer comme ceci:

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

Ce code court et propre:

::-webkit-input-placeholder {color: red;}
:-moz-placeholder           {color: red; /* For Firefox 18- */}
::-moz-placeholder          {color: red; /* For Firefox 19+ */}
:-ms-input-placeholder      {color: red;}

Que dis-tu de ça

<input type="text" value="placeholder text" onfocus="this.style.color='#000'; 
    this.value='';" style="color: #f00;" />

Pas de CSS ni d'espace réservé, mais vous obtenez les mêmes fonctionnalités.

J'ai essayé toutes les combinaisons ici pour changer la couleur, sur ma plate-forme mobile, et finalement c'était:

-webkit-text-fill-color: red;

qui a fait l'affaire.

Pour les utilisateurs SASS / SCSS utilisant Bourbon , il a une fonction intégrée.

//main.scss
@import 'bourbon';

input {
  width: 300px;

  @include placeholder {
    color: red;
  }
}

Sortie CSS, vous pouvez également saisir cette partie et la coller dans votre code.

//main.css

input {
  width: 300px;
}

input::-webkit-input-placeholder {
  color: red;
}
input:-moz-placeholder {
  color: red;
}
input::-moz-placeholder {
  color: red;
}
input:-ms-input-placeholder {
  color: red;
}

essayez ce code pour différents éléments différents style d'entrée

your css selector::-webkit-input-placeholder { /*for webkit */
    color:#909090;
    opacity:1;
}
 your css selector:-moz-placeholder { /*for mozilla */
    color:#909090;
    opacity:1;
}
 your css selector:-ms-input-placeholder { /*for for internet exprolar */ 
   color:#909090;
   opacity:1;
}

Exemple 1:

input[type="text"]::-webkit-input-placeholder { /*for webkit */
    color: red;
    opacity:1;
}
 input[type="text"]:-moz-placeholder { /*for mozilla */
    color: red;
    opacity:1;
}
 input[type="text"]:-ms-input-placeholder { /*for for internet exprolar */ 
   color: red;
   opacity:1;
}

exemple 2:

input[type="email"]::-webkit-input-placeholder { /*for webkit */
    color: gray;
    opacity:1;
}
 input[type="email"]:-moz-placeholder { /*for mozilla */
    color: gray;
    opacity:1;
}
 input[type="email"]:-ms-input-placeholder { /*for for internet exprolar */ 
   color: gray;
   }

Voici encore un exemple:

.form-control::-webkit-input-placeholder {
  color: red;
  width: 250px;
}
h1 {
  color: red;
}

<div class="col-sm-4">
  <input class="form-control" placeholder="Enter text here.." ng-model="Email" required/>
</div>

Ajout d'une réelle possibilité très agréable et simple: les filtres CSS !

Il stylisera tout, y compris l'espace réservé.

Les éléments suivants définiront les deux entrées sur la même palette, en utilisant le filtre de teinte pour le changement de couleur. Il rend très bien maintenant dans les navigateurs (sauf ie ...)

input {
  filter: sepia(100%) saturate(400%) grayscale(0) contrast(200%) hue-rotate(68deg) invert(18%);
}

<input placeholder="Hello world!" />
<input type="date" /><br>
<input type="range" />
<input type="color" />

Pour permettre aux utilisateurs de le modifier dynamiquement, en utilisant une couleur de type d'entrée pour les modifications ou pour trouver des nuances, consultez cet extrait:

De: https://codepen.io/Nico_KraZhtest/pen/bWExEB

function stylElem() {
  stylo.dataset.hue = ((parseInt(stylo.value.substring(1), 16))/46666).toFixed(0)
  Array.from(document.querySelectorAll('input, audio, video')).forEach(function(e){
      e.style.cssText += ";filter:sepia(100%) saturate(400%)grayscale(0)contrast(200%)hue-rotate("+ stylo.dataset.hue+"deg)invert("+(stylo.dataset.hue/3.6)+"%)"
  out.innerText = e.style.cssText
})()}

stylElem()

<div id="out"></div> <p>
  <input placeholder="Hello world!" />
  <input type="date" /><br>
  <input type="range" />
  <input type="color" />
Colors (change me)-> 
<input type="color" id="stylo" oninput="stylElem()" /> <br><br>
<audio controls src="#"></audio> <br><br> 
<video controls src="#"></video>

Documents sur les filtres CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/filter

OK, les espaces réservés se comportent différemment dans les différents navigateurs, vous devez donc utiliser le préfixe du navigateur dans votre CSS pour les rendre identiques, par exemple Firefox donne une transparence à l'espace réservé par défaut, alors vous devez ajouter l'opacité 1 à votre CSS, plus la couleur, ce n'est pas un gros souci la plupart du temps, mais bon de les avoir cohérents:

*::-webkit-input-placeholder { /* WebKit browsers */
    color:    #ccc;
}
*:-moz-placeholder { /* Mozilla Firefox <18 */
    color:    #ccc;
    opacity:  1;
}
*::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #ccc;
    opacity:  1;
}
*:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:    #ccc;
}

Vous pouvez modifier la couleur de l'espace réservé d'une entrée HTML5 avec CSS. Si par hasard, votre conflit CSS, cette note de code fonctionne, vous pouvez utiliser (! Important) comme ci-dessous.

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

<input placeholder="Stack Snippets are awesome!">

J'espère que cela vous aidera.

Vous pouvez l'utiliser pour le style de saisie et de mise au point:

input::-webkit-input-placeholder  { color:#666;}
input:-moz-placeholder  { color:#666;}
input::-moz-placeholder { color:#666;}
input:-ms-input-placeholder  { color:#666;}
/* focus */
input:focus::-webkit-input-placeholder { color:#eee; }
input:focus:-moz-placeholder { color:#eee } /* FF 4-18 */
input:focus::-moz-placeholder { color:#eee } /* FF 19+ */
input:focus:-ms-input-placeholder { color:#eee } /* IE 10+ */

Le moyen le plus simple serait:

#yourInput::placeholder {
    color: red;/*As an example*/
}
/* if that would not work, you can always try styling the attribute itself: */
#myInput[placeholder] {
    color: red;
}

Compass a un mixin pour cela hors de la boîte.

Prenez votre exemple:

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

Et dans SCSS en utilisant une boussole:

input[type='text'] {
  @include input-placeholder {
    color: #616161;
  }
}

Voir les documents pour le mixin entrée-espace réservé.

Voici la solution avec les sélecteurs CSS

::-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 { /* Microsoft Edge */
   color:    #909;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #909;
}

• WebKit, Blink (Safari, Google Chrome, Opera 15+) et Microsoft Edge utilisent un pseudo-élément:
  :: - webkit-input-placeholder.
• Mozilla Firefox 4 à 18 utilise une pseudo-classe
  :: -moz-placeholder (un deux-points).
  Mozilla Firefox 19+ utilise un pseudo-élément:
  :: - moz-placeholder, mais l'ancien sélecteur fonctionnera encore pendant un certain temps.
• Internet Explorer 10 et 11 utilisent une pseudo-classe
  :: -ms-input-placeholder.
• Internet Explorer 9 et versions antérieures ne prennent pas du tout en charge l'attribut d'espace réservé, tandis qu'Opera 12 et versions ultérieures ne prennent en charge aucun sélecteur CSS pour les espaces réservés.

Une partie du HTML:

 <form action="www.anything.com">
 <input type="text" name="name"
  placeholder="Enter sentence"/>
  </form>

Je vais montrer comment changer la couleur d'expression de 'Enter phrase' par CSS:

  ::placeholder{
  color:blue;
   }