web-dev-qa-db-fra.com

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

Chrome prend en charge les éléments placeholder on input[type=text] (d'autres le font probablement aussi).

Mais la CSS suivante 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.

Existe-t-il un moyen de changer la couleur du texte de substitution?

htmlcsshtml5placeholderhtml-input
3744
David Murdoch

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 Edge utilisent un pseudo-élément: ::-webkit-input-placeholder. [ Ref ]
  • Mozilla Firefox 4 à 18 utilise une pseudo-classe: :-moz-placeholder (un deux points). [ Ref ]
  • Mozilla Firefox 19+ utilise un pseudo-élément: ::-moz-placeholder, mais l'ancien sélecteur fonctionnera encore pendant un certain temps. [ Ref ]
  • Internet Explorer 10 et 11 utilisent une pseudo-classe: :-ms-input-placeholder. [ Ref ]
  • Avril 2017: La plupart des navigateurs modernes prennent en charge le pseudo-élément simple ::placeholder [ Ref ]

Internet Explorer 9 et versions antérieures ne prennent pas du tout en charge l'attribut placeholder, alors que Opera 12 et versions inférieures ne sont pas compatibles aucun 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 de vrais éléments dans le Shadow DOM . Une padding sur une input n'aura 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 niveau de sélection 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, tous les navigateurs ignoreraient le groupe entier .

::-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 présenter une opacité réduite par défaut. Vous devez donc utiliser opacity: 1 ici.
  • Notez que le texte d’espace réservé est simplement coupé s’il ne s’ajuste pas - redimensionnez vos éléments d’entrée dans em et 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 supportant HTML pour placeholder mais sans support CSS (comme Opera) doivent également être testés.
  • Certains navigateurs utilisent des CSS supplémentaires par défaut pour certains types input (email, search). Celles-ci peuvent affecter le rendu de manière inattendue. Utilisez les propriétés-webkit-appearance et -moz-appearance pour changer cela. Exemple:
    [type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }
4651
fuxia

/* 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>

Ceci va styler tous les espaces réservés input et textarea.

Remarque importante: Ne regroupez pas ces règles. Créez plutôt une règle distincte pour chaque sélecteur (un sélecteur non valide dans un groupe rend le groupe entier invalide).

684
brillout

Vous voudrez peut-être aussi styler textareas:

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

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

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

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

En particulier, 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 navigateurs est ici .

95
ajcw

Pour Sass users:

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

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" />

56
Love Trivedi

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

::-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; 
}
46
Dionysios Arvanitis

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édit: David Walsh

39
Kristian

Utilisez le nouveau ::placeholder si vous utilisez autoprefixer .

Notez que le .placeholder mixin de Bootstrap est déconseillé en ce sens.

Exemple:

input::placeholder { color: black; }

Lorsque vous utilisez le préfixe automatique, le code ci-dessus est converti en code correct pour tous les navigateurs.

37
Mike

Nous avons maintenant un moyen standard d'appliquer CSS à un espace réservé d'entrée: ::placeholder pseudo-élément from this CSS Module Level 4 Draft.

37
user3790069

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

Je remplace la opacity par 1, alors ce sera bien de partir.

34
Burak Tokak

Je pense que ce code fonctionnera, car un espace réservé est nécessaire uniquement pour le texte de type entrée. Donc, cette ligne CSS suffira à répondre à vos besoins:

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

Je ne me souviens pas où j'ai trouvé cet extrait de code sur Internet (ce n'est pas moi qui l'ai écrit, 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('');
            }
        })
    });

Il suffit de charger ce code JavaScript, puis de modifier votre espace réservé avec CSS en appelant cette règle:

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

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

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

Ou si vous utilisez Less :

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

Que dis-tu de ça

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

Pas de CSS ou d'espace réservé, mais vous obtenez la même fonctionnalité.

17
user1729061

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;}
16
Banti Mathur

Si vous utilisez Bootstrap et que vous ne pouvez pas le faire fonctionner, vous avez probablement oublié le fait que Bootstrap ajoute lui-même ces sélecteurs. C’est Bootstrap v3.3 dont nous parlons.

Si vous essayez de modifier l’espace réservé dans une classe CSS .form-control, vous devez le redéfinir comme suit:

.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;
}
16
steady_daddy

J'ai essayé toutes les combinaisons ici pour changer de couleur, sur ma plateforme mobile, et finalement c'était

-webkit-text-fill-color: red;

qui a fait le tour.

14
aviram83

Pour les utilisateurs SASS/SCSS utilisant Bourbon , la fonction est intégrée.

//main.scss
@import 'bourbon';

input {
  width: 300px;

  @include placeholder {
    color: red;
  }
}

Sortie CSS, vous pouvez également récupérer 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;
}
7
trungk18

essayez ce code pour différents styles d'élément 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;
   }
6
Md. Abu Sayed

Voici un autre 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>

5
Mahendra Kulkarni

Ajout d’une possibilité très simple et très pratique: filtres css! 

 enter image description here

 enter image description here

 enter image description here

Tout sera stylé, y compris l'espace réservé.

Les éléments suivants définissent 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 de manière dynamique, en utilisant une couleur de type d'entrée pour les changements 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>

Css filtres docs: https://developer.mozilla.org/en-US/docs/Web/CSS/filter

4
Cryptopat

OK, les espaces réservés se comportent différemment selon les navigateurs. Vous devez donc utiliser le préfixe du navigateur dans votre code CSS pour les rendre identiques. Par exemple, Firefox donne une transparence à l’emplacement réservé par défaut. une grande préoccupation la plupart du temps, mais bon de les avoir cohérent:

*::-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;
}
4
Alireza

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 aidera.

3
Deepak Kumar

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+ */
2
fraweb

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

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

Prenez votre exemple:

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

Et dans SCSS avec compas:

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

Voir docs pour le mixin input-placeholder.

1
bendav91

Une partie de HTML:

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

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

  ::placeholder{
  color:blue;
   }
0
Kheyraddin

essayez ceci vous aidera à faire fonctionner tous les navigateurs de vos favoris:

::-webkit-input-placeholder { 
    /* Chrome/Opera/Safari */
      color: pink;
    }
    ::-moz-placeholder { 
    /* Firefox 19+ */
      color: pink;
    }

    :-moz-placeholder { 
    /* Firefox 18- */
      color: pink;
    }
0
Anand

Couleur de l'espace réservé sur un élément spécifique dans différents navigateurs.

HTML

<input class='contact' type="email" placeholder="[email protected]">

CSS 

    .contact::-webkit-input-placeholder { /* Chrome/Opera/Safari */
      color: pink;
    }
    .contact::-moz-placeholder { /* Firefox 19+ */
      color: pink;
    }
    .contact:-ms-input-placeholder { /* IE 10+ */
      color: pink;
    }
    .contact:-moz-placeholder { /* Firefox 18- */
      color: pink;
    }
0
Majedur Rahaman