Changer la couleur d'un paramètre d'entrée HTML5 avec CSS

Chrome soutient l'attribut placeholder sur input[type=text] éléments (d'autres probablement font aussi).

mais ce qui suit CSS ne fait rien à la valeur du paramètre:

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

Value restera toujours grey au lieu de red .

Est-il un moyen de changer la couleur de la texte de l'espace réservé?

3640
demandé sur David Murdoch 2010-04-09 23:54:53
la source

30 ответов

mise en œuvre

il y a 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 to 18 utilise une pseudo-classe: :-moz-placeholder ( one colon). [ 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: navigateurs les plus modernes soutenez le pseudo-élément simple ::placeholder [ Réf. ]

Internet Explorer 9 et inférieur ne supporte pas l'attribut placeholder du tout, tandis que Opera 12 et inférieur ne supporte pas tout sélecteur CSS pour les espaces réservés.

la discussion sur la meilleure mise en œuvre se poursuit. Remarque les pseudo-éléments agissent comme des éléments réels dans le Shadow DOM . Un padding sur un input n'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 une défaillance de sélecteur n'est pas valide.

nous avons Donc besoin de règles distinctes pour chaque navigateur. Sinon, le groupe entier 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

  • soyez prudent pour éviter les mauvais contrastes. Le placeholder de Firefox semble être en défaut avec une opacité réduite, donc doit utiliser opacity: 1 ici.
  • notez que le texte placé est juste coupé s'il ne correspond pas à votre entrez les éléments dans em et testez-les avec de grands paramètres de taille minimale de police. N'oubliez pas les traductions: certaines langues ont besoin de plus de place pour le même mot.
  • Les navigateurs
  • avec support HTML pour placeholder mais sans support CSS pour cela (comme Opera) doivent également être testés.
  • certains navigateurs utilisent des CSS par défaut supplémentaires pour certains types input ( email , search ). Ils peuvent affecter le rendu en des façons inattendues. Utilisez les propriétés -webkit-appearance et -moz-appearance pour changer cela. Exemple:
    [type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }
4568
répondu fuxia 2018-01-07 17:00:37
la source

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

ce sera style tout input et textarea placeholders.

Note importante: ne regroupez pas ces règles. Au lieu de cela, faites une règle séparée pour chaque sélecteur (un sélecteur invalide dans un groupe rend le groupe entier invalide).

668
répondu brillout 2018-07-19 18:14:22
la source

vous pouvez également vouloir style textareas:

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #636363;
}
input:-moz-placeholder, textarea:-moz-placeholder {
  color: #636363;
}
262
répondu Matt 2013-07-24 00:45:21
la source

pour les utilisateurs Bootstrap et moins , il y a un mixin .emplacement:

// Placeholder text
// -------------------------
.placeholder(@color: @placeholderText) {
  &:-moz-placeholder {
    color: @color;
  }
  &:-ms-input-placeholder {
    color: @color;
  }
  &::-webkit-input-placeholder {
    color: @color;
  }
}
99
répondu EIIPII 2016-09-24 10:52:41
la source

en plus de la réponse de toscho, j'ai remarqué certaines 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.

spécifiquement Chrome 9 et 10 ne prennent pas en charge background-color , border , text-decoration et text-transform lors de la conception de l'espace réservé.

la comparaison complète par navigateur est ici .

94
répondu ajcw 2013-09-25 17:04:08
la source

pour Sass 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);
}
70
répondu Konst_ 2016-09-24 10:54:57
la source

ça marchera très 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" />
53
répondu Love Trivedi 2016-09-12 11:08:56
la source

dans Firefox et Internet Explorer, la couleur normale du texte d'entrée l'emporte sur la propriété de couleur des espaces réservés. Donc, nous avons besoin de

::-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; 
}
45
répondu Dionysios Arvanitis 2016-09-24 10:48:14
la source

Cross-browser solution:

/* 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
répondu Kristian 2014-01-03 03:27:05
la source

maintenant, nous avons une méthode standard pour appliquer CSS à un placeholder d'entrée: ::placeholder pseudo-élément de ce Module CSS niveau 4 ébauche.

37
répondu user3790069 2015-08-12 06:11:39
la source

utilisez le nouveau ::placeholder si vous utilisez autoprefixer .

noter que le .la mixine placeholder de Bootstrap est dépréciée en faveur de cela.

exemple:

input::placeholder { color: black; }

si vous utilisez autoprefixer, le code ci-dessus sera converti au code correct pour tous les navigateurs.

37
répondu hitautodestruct 2017-02-13 11:19:53
la source

je viens de réaliser quelque chose pour Mozilla Firefox 19+ que le navigateur donne une valeur d'opacité pour le placeholder, de sorte que 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 remplacer le opacity pour 1, de sorte qu'il sera bon pour aller.

34
répondu Burak Tokak 2016-09-24 10:56:21
la source

Je ne me souviens pas où j'ai trouvé ce 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('');
            }
        })
    });

il suffit de charger ce code JavaScript et ensuite éditer votre placeholder avec CSS en appelant cette règle:

form .placeholder {
   color: #222;
   font-size: 25px;
   /* etc. */
}
32
répondu Dragos Rizescu 2016-09-24 10:50:27
la source

je pense que ce code fonctionnera parce qu'un placeholder est nécessaire seulement pour le texte de type d'entrée. Donc cette seule ligne CSS sera suffisant pour votre besoin:

input[type="text"]::-webkit-input-placeholder {
    color: red;
}
31
répondu Alias Varghese 2016-09-24 10:57:58
la source

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

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

ou si vous utilisez moins :

.form-control{
    .placeholder(red);
}
29
répondu gfaceless 2016-09-24 10:53:37
la source

Que pensez-vous de ce

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

pas de CSS ou de paramètre, mais vous obtenez la même fonctionnalité.

17
répondu user1729061 2013-02-16 06:53:58
la source

si vous utilisez Bootstrap et que cela ne fonctionne pas, vous avez probablement manqué le fait que Bootstrap lui-même ajoute ces sélecteurs. C'est Bootstrap v3.3 nous parlons.

si vous essayez de changer le paramètre à l'intérieur d'un .form-control classe CSS, alors vous devriez 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;
}
16
répondu steady_daddy 2016-09-24 11:01:43
la source

Ce court et nettoyer le code:

::-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
répondu BANTIMATHUR 2017-08-30 21:18:11
la source

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

-webkit-text-fill-color: red;

qui a fait l'affaire.

14
répondu aviram83 2016-09-24 10:58:47
la source

pour l'utilisateur SASS/SCSS en 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 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
répondu trungk18 2016-10-04 10:50:11
la source

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
répondu Mahendra Kulkarni 2016-05-31 12:21:03
la source

OK, les espaces réservés se comportent différemment dans différents navigateurs, donc vous avez besoin d'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, donc besoin d'ajouter opacity 1 à votre css, plus la couleur, ce n'est pas un grand problème la plupart du temps, mais bon pour 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;
}
4
répondu Alireza 2017-05-11 15:41:30
la source

essayez ce code pour un élément d'entrée différent

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;
   }
4
répondu Md. Abu Sayed 2017-10-13 09:47:35
la source

ajout d'une réelle possibilité très belle et simple: CSS filters !

enter image description here

enter image description here

enter image description here

il va tout styliser, y compris le placeholder.

ce qui suit définira les deux entrées sur la même palette, en utilisant le filtre de teinte pour le changement de couleur. Elle porte 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 changer dynamiquement, en utilisant un type d'entrée couleur 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 filters docs: https://developer.mozilla.org/en-US/docs/Web/CSS/filter

3
répondu Cryptopat 2018-04-11 18:42:41
la source

vous pouvez changer la couleur du paramètre d'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!">

Espérons que cela aidera.

2
répondu Deepak Kumar 2017-12-21 11:10:43
la source

vous pouvez l'utiliser pour l'entrée et le style 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
répondu fraweb 2018-05-13 18:19:23
la source

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

prenez votre exemple:

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

et en SCSS utilisant compass:

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

Voir les docs pour l'entrée-de l'espace réservé mixin.

1
répondu bendav91 2016-09-20 15:37:05
la source

essayez ceci vous aidera cela fonctionnera dans tous vos navigateurs fav:

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

    :-moz-placeholder { 
    /* Firefox 18- */
      color: pink;
    }
0
répondu Anand 2017-09-22 20:27:51
la source
<style>
    ::-webkit-input-placeholder { 
        color:red; 
     }
    ::-moz-placeholder { 
        color:red; 
    } /* firefox 22+ */
    :-ms-input-placeholder { 
        color:red; 
    } /* ie10,11 */
    input:-moz-placeholder { 
        color:red; 
    }
 </style>
-1
répondu SUNIL KUMAR E.U 2017-10-18 12:43:51
la source

Essayez cette

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
  color: pink;
}
:-moz-placeholder { /* Firefox 18- */
  color: pink;
}
-1
répondu aphoe 2017-10-23 20:59:12
la source

Autres questions sur html css html5 html-input placeholder