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

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

Mais le CSS suivant ne fait rien à la valeur de l’espace réservé:

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

Value restra toujours grey au lieu de red .

Est-il possible de changer la couleur du texte de l’espace réservé?

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 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 supportent le simple pseudo-élément ::placeholder [ Ref ]

Internet Explorer 9 et les placeholder ne prennent pas du tout en charge l’atsortingbut d’ placeholder , alors qu’Opéra 12 et les versions ultérieures ne prennent en charge 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 DOM Shadow . Un padding sur une 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 les sélecteurs niveau 3 :

un groupe de sélecteurs contenant un sélecteur invalide 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; } 
  
 /* 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; } 
  

Vous pouvez également vouloir styler les 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 mixin .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é certaines incohérences de webkit entre Chrome 9-10 et Safari 5 avec les propriétés CSS sockets en charge qui méritent d’être notées.

Plus précisément, Chrome 9 et 10 ne prennent pas en charge la background-color , la border , la text-decoration text-transform lors de la personnalisation de l’espace réservé.

La comparaison complète entre 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 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; } 
  

Dans Firefox et Internet Explorer, la couleur de texte d’entrée normale 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; } 

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

Maintenant, nous avons un moyen standard d’appliquer CSS à un espace réservé à une entrée: ::placeholder pseudo-élément ::placeholder de ce brouillon de niveau CSS Module 4.

Utilisez le nouveau ::placeholder si vous utilisez autoprefixer .

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

Exemple:

 input::placeholder { color: black; } 

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

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 écrase l’ opacity pour 1, alors ça va être bon.

Je ne me souviens plus 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é est nécessaire uniquement pour le texte de type d’entrée. Donc, cette ligne CSS suffira à 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 avoir une priorité plus élevée:

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

Ou si vous utilisez moins :

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

Que dis-tu de ça

  

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

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. C’est de Bootstrap v3.3 dont nous parlons.

Si vous essayez de modifier l’espace réservé dans une classe CSS .form-control, vous devez la remplacer par 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;} 

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

 -webkit-text-fill-color: red; 

qui a fait le tour.

Pour l’utilisateur SASS / SCSS utilisant Bourbon , il dispose d’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; } 

Voici un autre exemple:

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

OK, les espaces réservés se comportent différemment selon les 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. Vous devez donc append l’opacité 1 une grande préoccupation 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; } 

essayez ce code pour un style différent 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; } 

Ajout d’une possibilité réelle très agréable: filtres CSS !

entrer la description de l'image ici

entrer la description de l'image ici

entrer la description de l'image ici

Il va tout styler, y compris l’espace réservé.

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. 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%); } 
  

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

Compass a un mixin pour cela.

Prenons votre exemple:

  

Et en SCSS en utilisant la boussole:

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

Reportez-vous à la documentation de mixin.

Vous pouvez modifier la couleur d’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; }  

J’espère que cela aidera.

essayez ceci vous aidera ceci fonctionnera dans tous vos navigateurs favoris:

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

Essaye ça

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