Comment Changer La Couleur de Input Placeholder HTML5 Avec CSS

HTML5 a un attribut appelé placeholder. Cet atribut sur les éléments <input> et <textarea> fournit un indice à l'utilisateur sur ce qui peut être entré dans le champ.

Comment Définir la Couleur du Texte de Placeholder

La couleur initiale du texte placeholder est gris clair dans la plupart des navigateurs. Si vous voulez la changer, vous devez utiliser un pseudo-élément ::placeholder.

Veuillez noter que Firefox ajoute un opacité plus bas au placeholder, donc utilisez opacity: 1 pour fixer ça.

Dans le cas où vous voulez séléctionner "input" lui-même, lorsque son texte de "placeholder" est affiché, utilisez la pseudo-classe :placeholder-shown.

L'exemple du code ressemblera à cela:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      input {
        width: 90%;
        padding: 10px;
        margin: 5px;
        outline: none;
      }
      input::placeholder {
        color: #1c87c9;
        opacity: 1;
      }
      input:placeholder-shown {
        border: 1px solid #095484;
      }
    </style>
  </head>
  <body>
    <form action="/action_page.php">
      Prénom: <input type="text" name="firstname" placeholder="John" /><br />
      <br />
      Nom: <input type="text" name="lastname" placeholder="Lennon" /><br />
      <br />
      Adresse éléctronique: <input type="email" name="email" placeholder="[email protected]" />
    </form>
  </body>
</html>

Vous pouvez également changer la couleur du texte qui sera remplie à la place de placeholder. Pour faire cela, définissez un class pour chaque élément <input> et donnez lui les styles.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      input {
      padding: 10px;
      margin: 5px;
      width: 90%;
      }
      .one {
      color: #8ebf42;
      }
      .two {
      color: #ff0066;
      }
      .three {
      color: #1c87c9;
      }
      .one::placeholder {
      color: #1c87c9;
      }
      .two::placeholder {
      color: #ff0000;
      }
      .three::placeholder {
      color: #8ebf42;
      }
      input:placeholder-shown {
      border: 1px solid #095484;
    </style>
  </head>
  <body>
    <form action="/action_page.php">
      Prénom: <input class="one" type="text" name="firstname" placeholder="John"><br><br>
      Nom: <input class="two" type="text" name="lastname" placeholder="Lennon"><br><br>
      Adresse éléctronique: <input class="three" type="email" name="email" placeholder="[email protected]">
    </form>
  </body>
</html>

C'est important à ne pas oublier que chaque navigateur a sa façon différente de l'implémentation. Par exemple,

  1. ::-webkit-input-placeholder pseudo-élément pour Chrome/Safari/Opera
  2. ::-ms-input-placeholder pseudo-classe pour Edge (supporte aussi préfixe webkit)

La pseudo-classe et le pseudo-élément au-dessus sont nécessaires pour supporter le résultat requis.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      ::placeholder {
        color: #1c87c9;
        opacity: 1; /* Firefox */
      }
      :-webkit-input-placeholder {
        /* Chrome, Safari, Opera */
        color: #1c87c9;
      }
      ::-ms-input-placeholder {
        /* Microsoft Edge */
        color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <form action="/action_page.php">
      Prénom: <input type="text" name="firstname" placeholder="John" /><br />
      <br />
      Nom: <input type="text" name="lastname" placeholder="Lennon" /><br />
      <br />
      Adresse éléctronique: <input type="email" name="email" placeholder="[email protected]" />
    </form>
  </body>
</html>
Le pseudo-élément ::placeholder n'est pas supporté en Internet Explorer.