stylen leere Eingabefelder mit CSS

Ein allgemeines Styling -Bedürfnis ist, bestimmte Regeln auf leeren Eingabefelder anzuwenden. Dies kann nützlich sein, um Benutzern visuelle Hinweise zu erhalten, z. B. einem Platzhaltertext oder einem farbigen Rand. Die Verwendung der Eingabe [value = ""] für leere Eingaben funktioniert jedoch möglicherweise nicht wie beabsichtigt.

In modernen Browsern bietet die: Pseudo-Klasse von Placeholder-Showne eine zuverlässigere Möglichkeit, leere Eingabefelder zu stylen. Diese Pseudo-Klasse zielt auf Eingabefelder auf, in denen der Platzhaltertext derzeit sichtbar ist und angibt, dass das Eingabefeld leer ist.

Um einen roten Rand auf ein leeres Eingabefeld anzuwenden, können Sie die folgenden CSS verwenden:

input:placeholder-shown {
  border: 1px solid red;
}

Beachten Sie, dass Sie auch ein Platzhalter-Attribut auf dem Eingabefeld in html festlegen müssen:

Mithilfe: Platzhalter-Shown können Sie ein benutzerdefiniertes Styling erstellen, das auf leere Eingabefelder abzielt und verbessertes Benutzer-Feedback bietet.