Wie kann ich leere Eingabefelder mit CSS formatieren?

Leeres Eingabefeld-Styling in CSS

Das Abfragen eines Eingabefelds basierend auf seinem leeren Zustand erfordert einen bestimmten Ansatz in CSS. Obwohl der bereitgestellte Eingabeselektor [value=""] in modernen Browsern nicht funktioniert, gibt es eine Lösung.

Geben Sie :placeholder-shown ein. Diese Pseudoklasse zielt speziell auf leere Eingabefelder ab und ermöglicht Ihnen die Anwendung von Stilen, die entfernt werden, sobald das Eingabefeld einen Wert enthält. Zum Beispiel:

input:placeholder-shown {
    border: 1px solid red; /* Red border only if the input is empty */
}

Es ist wichtig zu beachten, dass das Platzhalterattribut im HTML festgelegt werden sollte, damit der Selektor :placeholder-shown funktioniert. Darüber hinaus erfordert Chrome, dass mindestens ein Leerzeichen als Platzhalterwert vorhanden ist.

Stellen Sie sicher, dass Sie das Platzhalterattribut wie folgt mit einem Leerzeichen einschließen:

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

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