html - type - mdn placeholder




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

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

Internet Explorer 9 et les placeholder ne prennent pas en charge l'attribut d' placeholder , tandis qu'Opera 12 et les 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 se poursuit. Notez que les pseudo-éléments agissent comme de vrais éléments dans le DOM Shadow . Un padding sur une input n'aura 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 de niveau 3 :

un group 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, tout le 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

  • Veillez à éviter les mauvais contrastes. L'espace réservé de Firefox semble présenter une opacité réduite par défaut. Il doit donc utiliser l' opacity: 1 ici.
  • Notez que le texte de substitution est simplement coupé s'il ne convient pas - redimensionnez vos éléments d'entrée dans em et 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 prenant en charge HTML pour les placeholder mais sans support CSS (comme Opera) doivent également être testés.
  • Certains navigateurs utilisent des CSS supplémentaires par défaut pour certains types de input ( email , search ). Celles-ci peuvent affecter le rendu de manière inattendue. Utilisez les properties -webkit-appearance et -moz-appearance pour changer cela. Exemple:
    [type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }

Chrome prend en charge l' attribut 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;
}
<input type="text" placeholder="Value">

Value restera toujours grey au lieu de red .

Existe-t-il un moyen de changer la couleur du texte fictif?


Ajout d’une possibilité très simple et très pratique: les filtres css !

Tout sera stylé, y compris l'espace réservé.

Les éléments suivants définissent 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 de manière dynamique, en utilisant une couleur de type d'entrée 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>

Documents de filtres CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/filter


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


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

J'ai essayé chaque combinaison ici pour changer la couleur, sur ma plate-forme mobile, et finalement c'était:

-webkit-text-fill-color: red;

qui a fait le tour.


Je ne me souviens pas où j'ai trouvé cet extrait de code sur Internet (ce n'est pas moi qui l'ai écrit, 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, puis de modifier votre espace réservé avec CSS en appelant cette règle:

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

Je viens de réaliser quelque chose pour Mozilla Firefox 19+ que le navigateur donne une valeur d'opacité pour 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'écrase l' opacity pour 1, alors ce sera bien d'aller.


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

OK, les espaces réservés se comportent différemment selon les navigateurs. Vous devez donc utiliser le préfixe de navigateur dans votre code CSS pour les rendre identiques. Par exemple, Firefox donne une transparence à l’espace réservé par défaut. Vous devez donc ajouter une opacité 1 à votre css, ainsi que sa couleur une grande préoccupation la plupart du temps, mais bon de les avoir cohérent:

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

Pour les utilisateurs Bootstrap et Less , il existe un mélange .placeholder:

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

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

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

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

Si vous utilisez Bootstrap et que vous ne parvenez pas à le faire fonctionner, vous avez probablement oublié le fait que Bootstrap ajoute lui-même ces sélecteurs. C’est Bootstrap v3.3 dont nous parlons.

Si vous essayez de modifier l’espace réservé au sein d’une classe CSS .form-control, vous devez le redéfinir comme suit :

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

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


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>


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

Vous voudrez peut-être aussi style textareas:

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

essayez ce code pour différents styles 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;
   }

Compass a un mix pour cela prêt à l'emploi.

Prenez votre exemple:

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

Et dans SCSS avec compas:

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

Voir docs pour le mixin input-placeholder.


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

Ceci stylisera tous input espaces réservés d’ input et de textarea .

Remarque importante: Ne regroupez pas ces règles. A la place, créez une règle distincte pour chaque sélecteur (un sélecteur non valide dans un groupe rend le groupe entier non valide).





html-input