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

3977

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é?

David Murdoch
la source
375
Attention rapide (pas une solution, juste un info): si je me souviens bien, l'entrée [placeholder] correspond juste aux balises <input> qui ont un attribut d'espace réservé, elle ne correspond pas à l'attribut d'espace réservé lui-même.
pinkgothic
12
Yah, la pensée m'a traversé l'esprit que cela peut être comme essayer de styliser l'attribut "title" d'un élément. Alors +1 pour penser de la même façon!
David Murdoch
5
@MathiasBynens La pseudo-classe affichée par un espace réservé correspond à un élément d'entrée qui affiche un tel texte d'espace réservé. Il correspond donc à la <input>balise, comme le inputsélecteur, mais en affichant le texte d'espace réservé tout à l'heure. Il ne correspond pas non plus à l'attribut d'espace réservé lui-même.
HEX
3
@HEX Ce n'est pas comme le inputsélecteur car il sélectionne tous les inputéléments. :placeholder-shownsélectionne uniquement les inputéléments qui affichent actuellement l'espace réservé, vous permettant de styliser uniquement ces éléments et de styliser efficacement le texte de l'espace réservé. Qu'est-ce que tu essayes de dire?
Mathias Bynens
1
@HEX (Bien sûr, il a également sélectionné des textareaéléments qui
affichent du

Réponses:

4809

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;
    }
fuxia
la source
27
Notez également que bien que Webkit considère cela comme ayant une spécificité assez forte, Mozilla ne le fait pas. Vous devrez probablement en afficher quelques-uns! Importants pour que les choses apparaissent.
dmnc
18
@toscho: merci pour la bonne réponse. J'avais juste besoin d'une petite démonstration de celui-ci "en direct", donc votre exemple peut également être atteint ici: jsfiddle.net/Sk8erPeter/KyVXK . Merci encore.
Sk8erPeter
90
L'espace réservé de Firefox semble être par défaut avec une opacité réduite. Pour quelqu'un d'autre qui se rafraîchit et se demande pourquoi diable cela ne semble pas fonctionner ("pourquoi mon texte blanc est-il toujours gris .."), utilisez l'opacité: 1
jwinn
8
Dans IE10 *:-ms-input-placeholderet :-ms-input-placeholderen lui-même ne fonctionne pas, mais INPUT:-ms-input-placeholderfonctionne. Impair.
Jared
37
Remarque pour Bootstrap 3: la classe "form-control" remplace la couleur en raison de la spécificité CSS (c'est-à-dire "form-control :: - webkit-input-placeholder"), vous devez donc être au moins aussi spécifique ou utiliser "! Important" dans votre CSS. (c'était l'enfer de déboguer car ni Firebug ni Devtools ne semblent montrer cette pseudo classe)
Costa
725

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

brillante
la source
2
Le document MSDN auquel vous vous êtes connecté indique qu'il est uniquement pris en charge dans Internet Explorer 10. Encore une bonne trouvaille, mais pas très utile jusqu'à ce que la base d'utilisateurs IE10 devienne significative (nous pourrions envisager une période de plusieurs années pour cela).
danishgoel
1
De manière réaliste, vous allez vouloir styliser les espaces réservés sur le site de manière uniforme, et non pas styliser chaque entrée individuelle par ID.
BadHorsie
10
Après FF19, vous devez utiliser :: - moz-placeholder
viplezer
1
Vous devez mettre ce CSS au bas de votre feuille de style, si vous appliquez également une classe sur l'entrée, afin de la faire fonctionner sur IE (11). Voir cette fourchette sur JSFiddle jsfiddle.net/9kkef . Ouvrez la page à la fois dans IE et dans un autre navigateur, dans IE, vous verrez que le texte de l'espace réservé sera dans la couleur de la classe appliquée.
Timo002
Parfois, si cela ne fonctionne pas, veuillez ajouter <! Important> à la propriété color.
Ahmed Na.
277

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;
}
Matt
la source
2
sur l'impression en chrome ne fonctionne pas ... aucune aide @media print {input [type = text] .form-control :: - webkit-input-placeholder, input [type = textarea] .form-control :: - webkit -input-placeholder {color: #FFFFFF; }}
Mahdi Alkhatib
107

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;
  }
}
EIIPII
la source
16
Ou encore plus simple, modifiez la variable @input-color-placeholder- généralement trouvée dans variables.less
William
@William ne serait-il pas plus facile de définir le sélecteur lui-même et d'utiliser le mixin pour éviter d'avoir à revenir en arrière et à le changer au cas où vous cherchez à rendre l'espace réservé d'une autre entrée d'une couleur différente?
Brandito
@Brandito - cela ressemble à un cas de bord - la couleur de l'espace réservé est généralement la même pour tous les éléments de formulaire d'un dessin.
William
@William Désolé, je suis horrible à formuler ces trucs sorta, je pensais qu'il serait préférable d'utiliser le mixin avec l'argument de la couleur d'entrée que vous désirez bien que très honnêtement, je pense probablement aux cas de bord I ' m l'habitude de (styliser l'espace réservé d'entrée de recherche où il est sur un fond coloré: P) désolé mais vous avez raison, excuses.
Brandito
99

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 .

ajcw
la source
76

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);
}
Konst_
la source
Manière plus flexible - à utiliser@content;
milkovsky
60

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

Love Trivedi
la source
1
Je devais également ajouter! Important dans Firefox v56
Savage
49

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; 
}
Dionysios Arvanitis
la source
41

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

Kristian
la source
41

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.

hitautodestruct
la source
40

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.

utilisateur3790069
la source
Cela fonctionne dans Firefox 51. Je vais simplement utiliser cette méthode; les autres navigateurs me rattraperont assez tôt (étant donné qu'aucune fonctionnalité n'est rompue si le style à être standard n'est pas appliqué).
Lonnie Best
36

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.

Burak Tokak
la source
35

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. */
}
Dragos Rizescu
la source
3
C'est l'ancienne façon de procéder, que j'ai beaucoup utilisée. L'inconvénient est que le texte d'espace réservé disparaît lorsque vous effectuez la mise au point. J'ai trouvé cela ennuyeux lorsque l'interface utilisateur n'inclut pas également d'étiquettes à côté de l'entrée. Au cours des derniers mois, j'ai commencé à remplacer cette méthode par l'utilisation de texte d'espace réservé, ce qui, je pense, est une amélioration UX.
Redtopia
4
L'autre problème avec un code comme celui-ci est que votre code côté serveur doit traiter le texte d'espace réservé comme une entrée vide, ce qui a des problèmes avec les cas de bord où vous voulez entrer une ville appelée "Ville". Au lieu de vérifier les valeurs par rapport au texte de l'espace réservé, vous devez vraiment utiliser un indicateur modifié par les données sur l'entrée, puis effacer l'entrée sur le formulaire soumis si l'indicateur n'est pas défini. Et pour les interfaces AJAX, vous n'avez peut-être même pas de formulaire, vous devriez donc pouvoir associer un événement de soumission arbitraire à l'entrée. C'est une de ces situations vraiment simples qui ne l'est pas.
Whelkaholism
34

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;
}
Alias ​​Varghese
la source
Ne l'utilisez plus. Il existe plusieurs autres éléments avec espace réservé et plusieurs préfixes. Voir les solutions ci-dessus ou utiliser ::placeholderavec le préfixeur automatique.
RiZKiT
33

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);
}
gfaceless
la source
19

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;
}
stabil_daddy
la source
17

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;}
BANTIMATHUR
la source
17

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.

user1729061
la source
15
que se passe-t-il si quelqu'un clique à nouveau après avoir écrit quelque chose .. le texte original qu'il a écrit aura disparu!
Lucky Soni
3
@LuckySoni, vous pouvez le faire, mais je préfère personnellement le premier. <input type="text" value="placeholder text" onfocus="if(!this.haswriting){this.style.color='#000'; this.value='';}" onblur="if(!this.value){this.style.color='#f00'; this.value='placeholder text'; this.haswriting=false;}else{this.haswriting=true};" style="color: #f00;"/>
user1729061
9
Même votre deuxième version n'offre pas la même fonctionnalité. Si l'utilisateur soumet le <form>avec cette entrée, le texte de l'espace réservé sera envoyé au serveur. J'ai vu tellement de sites faire mal.
lqc
C'est dangereux! Si vous revenez à la forme, vous avez tout perdu!
Mobarak Ali
15

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.

aviram83
la source
2
This property allows you to specify a fill color for text. If it is not set, then the color property will be used to do the fill.Il me semble que vous avez une autre règle CSS qui définit la colorpropriété.
David Murdoch
8

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;
}
trungk18
la source
8

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;
   }
Md. Abu Sayed
la source
5

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>

Mahendra Kulkarni
la source
5

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

entrez la description de l'image ici

entrez la description de l'image ici

entrez la description de l'image ici

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

Cryptopat
la source
4

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;
}
Alireza
la source
3

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.

Deepak Kumar
la source
3

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

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

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.
Mohammad Ayoub Khan
la source
0

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;
   }
dev_cc
la source