Wie kann ich Eingabefelder basierend darauf, ob sie Text enthalten, nur mithilfe von CSS formatieren?

Text in Eingabefeldern ohne JavaScript identifizieren

Im Bereich des CSS-Stils kann das Erkennen des Vorhandenseins von Text in einem Eingabeelement eine Herausforderung sein verwirrende Aufgabe. Die schwer fassbare Pseudoklasse :empty und der Selektor [value=""] liefern jedoch nicht die gewünschten Ergebnisse.

Dennoch erweist sich die Pseudoklasse :placeholder-shown als mögliche Lösung. Diese Pseudoklasse zielt auf Eingabeelemente ab, die ein Platzhalterattribut haben, ohne den Platzhaltertext anzuzeigen.

Verwendung:placeholder-shown

1. Stellen Sie sicher, dass Ihre Eingabe Das Element verfügt über ein nicht leeres Platzhalterattribut. Sogar ein einzelnes Leerzeichen ist akzeptabel.
2. Verwenden Sie den Selektor :not(:placeholder-shown), um die Eingabe zu formatieren, wenn sie Text enthält.
3. Verwenden Sie den Selektor :placeholder-shown, um die Eingabe zu formatieren wenn es leer ist.

Zum Beispiel:

input:not(:placeholder-shown) {
  border-color: green;
}

input:placeholder-shown {
  border-color: red;
}

Dieser Code würde färben Die Eingabe ist grün, wenn sie Text enthält, und rot, wenn sie leer ist.

Vorbehalte

Beachten Sie, dass diese Technik auf der Verwendung von Platzhalterattributen basiert. Daher ist es möglicherweise nicht für Szenarien geeignet, in denen kein Platzhaltertext erwünscht ist.

Das obige ist der detaillierte Inhalt vonWie kann ich Eingabefelder basierend darauf, ob sie Text enthalten, nur mithilfe von CSS formatieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!