Wie kann man die Farbe eines HTML5-Input-Platzhalters mit CSS ändern

HTML5 hat ein Attribut placeholder. Mit den Elementen <input> und <textarea> gibt dieses Attribut dem Benutzer einen Hinweis darauf, was in das Feld eingegeben werden kann.

Die Standardfarbe des Platzhaltertextes ist in den meisten Browsern hellgrau. Wenn Sie das ändern möchten, müssen Sie das Pseudo-Element ::placeholder verwenden.

Beachten Sie bitte, dass Firefox dem Platzhalter eine geringere Deckkraft hinzufügt, also verwenden Sie opacity: 1, um das zu korrigieren.

Wenn Sie die Eingabe selbst dann auswählen möchten, wenn ihr Platzhaltertext angezeigt wird, verwenden Sie die Pseudoklasse :placeholder-shown.

Das Codebeispiel sieht so aus:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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">
      Vorname: <input type="text" name="firstname" placeholder="John"><br><br>
      Nachname: <input type="text" name="lastname" placeholder="Lennon"><br><br>
      E-Mail-Adresse: <input type="email" name="email" placeholder="[email protected]">
    </form>
  </body>
</html>

Sie können auch die Textfarbe, die anstelle des Platzhalters gefüllt wird, ändern. Zu diesem Zweck definieren Sie für jedes Element <input> ein class und stylen Sie es.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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">
      Vorname: <input class="one" type="text" name="firstname" placeholder="John"><br><br>
      Nachname: <input class="two" type="text" name="lastname" placeholder="Lennon"><br><br>
      E-Mail-Adresse: <input class="three" type="email" name="email" placeholder="[email protected]">
    </form>
  </body>
</html>

Beachten Sie bitte, dass es für jeden Browser eine andere Implementierungsweise gibt. Zum Beispiel:

  1. ::-webkit-input-placeholder Pseudo-Element für Chrome/Safari/Opera
  2. ::-ms-input-placeholder Pseudo-Class für Edge (unterstützt auch Webkit-Präfixe)

Die oben erwähnten Pseudo-Klasse und das Pseudo-Element sind notwendig, um das gewünschte Ergebnis zu bekommen.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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">
      Vorname: <input type="text" name="firstname" placeholder="John"><br><br>
      Nachname: <input type="text" name="lastname" placeholder="Lennon"><br><br>
      E-Mail-Adresse: <input type="email" name="email" placeholder="[email protected]">
    </form>
  </body>
</html>
Das Pseudo-Element ::placeholder wird in Internet Explorer nicht unterstützt.