Wie kann ich leere Eingabefelder zuverlässig mit CSS formatieren?

Leere Eingabefelder mit CSS formatieren

Eine häufige Styling-Anforderung besteht darin, bestimmte Regeln auf leere Eingabefelder anzuwenden. Dies kann nützlich sein, um Benutzern visuelle Hinweise zu geben, z. B. einen Platzhaltertext oder einen farbigen Rahmen. Allerdings funktioniert die Verwendung des input[value=""]-Selektors für die Ausrichtung auf leere Eingaben möglicherweise nicht wie beabsichtigt.

In modernen Browsern bietet die Pseudoklasse :placeholder-shown eine zuverlässigere Möglichkeit, leere Eingabefelder zu formatieren . Diese Pseudoklasse zielt auf Eingabefelder ab, in denen der Platzhaltertext derzeit sichtbar ist, was darauf hinweist, dass das Eingabefeld leer ist.

Um einen roten Rahmen auf ein leeres Eingabefeld anzuwenden, können Sie das folgende CSS verwenden:

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

Beachten Sie, dass Sie auch ein Platzhalterattribut für das Eingabefeld in HTML festlegen müssen:

<input type="text" placeholder=" "> <!-- Do not remove placeholder -->

Chrome erfordert mindestens ein Leerzeichen als Platzhalterwert um die Pseudoklasse :placeholder-shown auszulösen. Dadurch wird sichergestellt, dass das Eingabefeld technisch gesehen nicht leer ist und dennoch Benutzereingaben möglich sind.

Durch die Verwendung von :placeholder-shown können Sie einen benutzerdefinierten Stil erstellen, der auf leere Eingabefelder abzielt und ein verbessertes Benutzerfeedback bietet.

Das obige ist der detaillierte Inhalt vonWie kann ich leere Eingabefelder zuverlässig mit CSS formatieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!