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

Question

Chrome prend en charge la balise attribut espace réservé sur des éléments de input[type=text] (autres le font sans doute trop).

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

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

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

Value sera toujours rester grey au lieu de red.

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

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 bord utilisent un pseudo-élément: ::-webkit-input-placeholder. ^{[ Ref ]}
• Mozilla Firefox 4 à 18 utilise une pseudo-classe: :-moz-placeholder ( une côlon). ^{[ Ref ]}
• Mozilla Firefox 19+ utilise un pseudo-élément: ::-moz-placeholder, mais l'ancien sélecteur continuera à fonctionner pendant un certain temps. ^{[ Ref ]}
• Internet Explorer 10 et 11 utilisent un pseudo-classe: :-ms-input-placeholder. ^{[ Ref ]}
• Avril 2017 La plupart des navigateurs modernes supportent simple pseudo-élément ::placeholder ^{[ Ref ]}

Internet Explorer 9 et inférieur ne prend pas en charge l'attribut placeholder du tout, alors que Opera 12 et inférieur ne supportent pas un 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 des éléments réels dans le Ombre DOM . Un padding sur un input ne sera pas obtenir 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 Selectors Niveau 3 :

  

de sélecteurs contenant un sélecteur non valide est 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

• Veillez à éviter les mauvais contrastes. L'espace réservé de Firefox semble être en défaut avec une opacité réduite, donc besoin d'utiliser opacity: 1 ici.
• Notez que le texte de l'espace réservé est tout simplement coupé si elle ne correspond pas - la taille de vos éléments d'entrée en em et de les tester avec de grands paramètres de taille minimale de la police. Ne pas oublier les traductions: certaines langues ont besoin de plus d'espace pour la même mot.
• Navigateurs avec support HTML pour placeholder mais sans soutien CSS pour cela (comme Opera) devrait être testé aussi.
• Certains navigateurs utilisent CSS par défaut supplémentaire pour certains types de input (de email, search). Celles-ci pourraient affecter le rendu de manière inattendue. Utilisez les de la -webkit-appearance et -moz-appearance changer cela. Exemple:

    [type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }

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>

Cela le style tous les espaces réservés input et textarea.

Remarque importante: Ne pas regrouper ces règles. Au lieu de cela, faire une règle distincte pour chaque sélection (un sélecteur non valide dans un groupe rend l'ensemble invalide du groupe).

Answer 3

Vous pouvez aussi le style textareas:

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

Answer 4

Bootstrap et Moins les utilisateurs, il y a un .placeholder mixin:

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

Answer 5

En plus de la réponse de toscho J'ai remarqué quelques incohérences webkit entre Chrome et Safari 5 9-10 avec les propriétés CSS pris en charge qui méritent d'être soulignées.

Plus précisément Chrome 9 et 10 ne prennent pas en charge background-color, border, text-decoration et text-transform en dénommant l'espace réservé.

La pleine comparaison cross-browser est ici .

Answer 6

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

Answer 7

Cela fonctionne très 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" />

Answer 8

Dans Firefox et Internet Explorer, la couleur du texte d'entrée normal est prioritaire sur la propriété de couleur d'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; 
}

Answer 9

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

Answer 10

Utilisez la nouvelle ::placeholder si vous utilisez autoprefixer .

Notez que le mixin .placeholder de Bootstrap est dépréciée en faveur de cela.

Exemple:

input::placeholder { color: black; }

Lors de l'utilisation autoprefixer qui précède sera converti en code correct pour tous les navigateurs.

Answer 11

Maintenant, nous avons un moyen standard pour appliquer CSS à l'espace réservé d'une entrée: pseudo-élément ::placeholder ce CSS Module Niveau 4 Projet.

Answer 12

Je me rends compte que quelque chose pour Mozilla Firefox 19+ que le navigateur donne une valeur d'opacité de l'espace réservé, 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;
}

J'écrasent les opacity pour 1, donc il sera bon d'aller.

Answer 13

Je ne me souviens pas où je l'ai trouvé cet extrait de code sur Internet (il n'a pas été écrit par moi, ne me souviens pas où je l'ai trouvé, ni qui l'a écrite).

$('[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 le code JavaScript et puis modifiez votre espace réservé avec CSS en appelant cette règle:

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

Answer 14

Je pense que ce code fonctionne car un espace réservé est nécessaire uniquement pour le texte du type d'entrée. Ainsi, celui-ci CSS en ligne sera suffisant pour vos besoins:

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

Answer 15

Bootstrap les utilisateurs, si vous utilisez class="form-control", il peut 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 Moins :

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

Answer 16

Si vous utilisez Bootstrap et ne pouvait pas obtenir ce travail alors vous avez probablement manqué le fait que Bootstrap lui-même ajoute ces sélecteurs. C'est Bootstrap v3.3 que nous parlons.

Si vous essayez de modifier l'espace réservé dans un .form contrôle classe CSS, alors vous devriez 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;
}

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

Answer 18

Qu'en est-ce

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

Non CSS ou un espace réservé, mais vous obtenez la même fonctionnalité.

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.

Answer 20

Pour les utilisateurs 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;
}

Answer 21

essayez ce code pour différents éléments d'entrée style 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;
   }

Answer 22

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

Answer 23

Ajout d'une possibilité très agréable et simple réelle: Filtres css !

Il le style tout, y compris l'espace réservé.

Ce qui suit va définir à la fois l'entrée sur la même palette, en utilisant le filtre de couleur pour un changement de couleur. Il rend très bien maintenant dans les navigateurs (sauf par exemple ...)

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 changer de façon dynamique, en utilisant une couleur de type d'entrée pour les changements, ou de 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>

Filtres Css docs: https://developer.mozilla.org / fr-fr / docs / Web / CSS / filtre

Answer 24

OK, placeholders se comportent différemment dans les différents navigateurs, vous devez donc en utilisant 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 l'opacité 1 à votre css, plus la couleur , ce n'est pas une grande préoccupation la plupart du temps, mais bien de les avoir cohérentes:

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

Answer 25

Vous pouvez modifier une couleur d'espace réservé d'entrée HTML5 avec CSS. Si par hasard, votre conflit CSS, ce travail de note de code, 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 vous aidera.

Answer 26

Vous pouvez l'utiliser pour l'entrée et le style focus:

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

Answer 27

La façon la 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;
}

Answer 28

Compass a un mixin pour cette sortie de la boîte.

Prenez votre exemple:

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

Et en SCSS utilisant la boussole:

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

Voir la documentation de l'mixin-espace réservé d'entrée.

Answer 29

Voici la solution avec 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 Arête utilisent un pseudo-élément:
  :: -. Webkit-entrée-espace réservé
• Mozilla Firefox 4 à 18 utilise une pseudo-classe:
  : -Moz-espace réservé (une virgule).
  Mozilla Firefox 19 + utilise un pseudo-élément:
  :: - moz-espace réservé, mais l'ancien sélecteur continueront à fonctionner pendant un certain temps
.
• Internet Explorer 10 et 11 utilisent un pseudo-classe:
  :. -M-entrée-espace réservé
• Internet Explorer 9 et inférieure ne supporte pas l'attribut d'espace réservé du tout, tandis que Opera 12 et inférieur ne supportent aucun sélecteur CSS pour les espaces réservés.

Answer 30

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 « Entrez phrase » par CSS:

  ::placeholder{
  color:blue;
   }