Heim >Web-Frontend >CSS-Tutorial >Wie kann ich Text in Eingabefeldern nur mithilfe von CSS erkennen?
Text in Eingabefeldern mit CSS erkennen
CSS bietet begrenzte Optionen zum Erkennen, ob ein Eingabefeld Text enthält. Die :empty-Pseudoklasse und der [value=""]-Selektor liefern keine zufriedenstellenden Ergebnisse.
Lösung mit :placeholder-shown
Für Eingabefelder mit einem Platzhalter Attribut kann die Pseudoklasse :placeholder-shown verwendet werden. Das Platzhalterattribut definiert einen Platzhaltertext, der angezeigt wird, wenn die Eingabe leer ist. Durch die Nutzung dieser Eigenschaft kann die folgende CSS-Regel angewendet werden:
input:not(:placeholder-shown) { border-color: green; } input:placeholder-shown { border-color: red; }
Wenn die Eingabe leer ist, wird der Platzhaltertext angezeigt und der Rand der Eingabe wird auf Rot gesetzt. Wenn der Benutzer Text eingibt, verschwindet der Platzhaltertext und die Rahmenfarbe ändert sich in Grün, was auf das Vorhandensein von Text in der Eingabe hinweist.
Einschränkungen
Diese Lösung hat Einige Einschränkungen:
Das obige ist der detaillierte Inhalt vonWie kann ich Text in Eingabefeldern nur mithilfe von CSS erkennen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!