Heim >Web-Frontend >CSS-Tutorial >Wie kann ich Text in Eingabefeldern nur mithilfe von CSS erkennen?

Wie kann ich Text in Eingabefeldern nur mithilfe von CSS erkennen?

Linda Hamilton
Linda HamiltonOriginal
2024-12-20 06:23:10808Durchsuche

How Can I Detect Text in Input Fields Using Only CSS?

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 Eingabefeld muss über ein Platzhalterattribut verfügen.
  • Der Platzhaltertext kann dies nicht leer sein. Allerdings kann ein einzelnes Leerzeichen verwendet werden, um einen unsichtbaren Platzhalter zu erstellen.

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn