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

Question

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

html lang-html prettyprint-override"><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

css html html-input html5 placeholder

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

30 réponses

score 4568 · Answer 1

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

score 668 · Answer 2

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

score 262 · Answer 3

vous pouvez également vouloir style textareas:

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

score 99 · Answer 4

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

score 94 · Answer 5

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 .

score 70 · Answer 6

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

score 53 · Answer 7

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

score 45 · Answer 8

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

score 39 · Answer 9

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

score 37 · Answer 10

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.

score 37 · Answer 11

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.

score 34 · Answer 12

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.

score 32 · Answer 13

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

score 31 · Answer 14

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

score 29 · Answer 15

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

score 17 · Answer 16

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

score 16 · Answer 17

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

score 16 · Answer 18

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

score 14 · Answer 19

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.

score 7 · Answer 20

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

score 5 · Answer 21

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>

score 4 · Answer 22

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

score 4 · Answer 23

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

score 3 · Answer 24

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

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

score 2 · Answer 25

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.

score 2 · Answer 26

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

score 1 · Answer 27

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.

score 0 · Answer 28

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

score -1 · Answer 29

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

score -1 · Answer 30

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

Las etiquetas más populares

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

30 réponses

mise en œuvre

sélecteurs CSS

notes D'utilisation