Wie kann man einen Platzhalter für eine HTML5-Box <select> durch HTML und CSS erstellen

Die Erstellung von HTML-Formularfeldern, hauptsächlich von den Feldern <select> mit CSS, war immer etwas kompliziert. Ein Formularfeld <select> auf eine sehr spezifische Weise zu ändern, ist oft nicht zu handhaben. Zu diesem Zweck ersetzen viele Websiten das Element <select> durch eine maßgeschneiderte Lösung auf Basis von HTML und CSS.

Erstellen eines Platzhalters für die Box <select> mit HTML5

Es existiert kein Placeholder-Attribut für das Tag <select>. Es gibt jedoch einige Möglichkeiten, einen Platzhalter für die Auswahlbox zu erstellen.

Die einfachste Möglichkeit, einen Platzhalter für das Element <select> zu erstellen, besteht darin, die Attribute disabled und selected mit dem globalen HTML5-Attribut hidden und globale Attribute verwenden.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
  </head>
  <body>
    <h2>Box mit Platzhalter auswählen</h2>
    <select name="drinks" required>
      <option value="" disabled selected hidden>Getränk wählen</option>
      <option value="coffee">Kaffee</option>
      <option value="tea">Tee</option>
      <option value="milk">Milch</option>
    </select>
  </body>
</html>

Versuch es selber!

Wie kann man einen Platzhalter für eine HTML5-Box <select> nur mit HTML und CSS erstellen

Hier kommt die zweite Methode, um einen Platzhalter für Ihre Auswahlbox hinzuzufügen. Zuerst müssen Sie Ihre ausgewählten Elemente mithilfe des Tags <option> erstellen. Stellen Sie dann die Attribute disabled und selected für Ihr leeres Element, das als Platzhalter dienen soll, ein.

Nun sehen Sie die erste Zeile wie ein Platzhalterfeld. Es ist nicht wählbar, aber dennoch sichtbar.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
  </head>
  <body>
    <h2>Box mit Platzhalter auswählen</h2>
    <select name="drinks" required>
      <option value="" disabled selected>Getränk wählen</option>
      <option value="coffee">Kaffee</option>
      <option value="tea">Tee</option>
      <option value="milk">Milch</option>
    </select>
  </body>
</html>

Versuch es selber!

Um es nach dem Klicken des Benutzers auf eine Option nicht sichtbar zu machen, sollen Sie die Eigenschaft display auf den Wert "none" einstellen. Setzen Sie auch Pseudo-Class :invalid , um den Inhalt des Box-Platzhalters nicht zu validieren. Geben Sie auch eine Farbe für Ihren Platzhalter an, indem Sie die CSS-Eigenschaft color verwenden.

Wenn das Element <select> benötigt wird, erlaubt es die Verwendung von Pseudo-Klass :invalid, mit dem Sie das Element <select> im Zustand "placeholder" gestalten können. Pseudo-Klass :invalid funktioniert hier wegen des leeren Wertes in der Platzhalteroption.

Sobald ein Wert eingestellt wurde, wird die ungültige Pseudoklasse :invalid gelöscht. Optional können Sie auch Pseudo-Klass :valid verwenden, wenn Sie möchten.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      select:required:invalid {
      color: #666;
      }
      option[value=""][disabled] {
      display: none;
      }
      option {
      color: #000;
      }
    </style>
  </head>
  <body>
    <h2>Box mit Platzhalter auswählen</h2>
    <select name="drinks" required>
      <option value="" disabled selected>Getränk wählen</option>
      <option value="coffee">Kaffee</option>
      <option value="tea">Tee</option>
      <option value="milk">Milch</option>
    </select>
  </body>
</html>

Versuch es selber!