Heim >Web-Frontend >CSS-Tutorial >Wie kann ich leere Eingabefelder mit CSS mit „:placeholder-shown' formatieren?

Wie kann ich leere Eingabefelder mit CSS mit „:placeholder-shown' formatieren?

Barbara Streisand
Barbara StreisandOriginal
2024-12-17 12:52:24808Durchsuche

How Can I Style Empty Input Fields with CSS Using `:placeholder-shown`?

Leere Eingabefelder mit CSS formatieren: Ein praktischer Leitfaden

Das Formatieren leerer Eingabefelder stellt in CSS eine Herausforderung dar, da leere Werte mit dem abgeglichen werden common value="" Selektor kann unzuverlässig sein. Um diese Situation effektiv anzugehen, beschäftigen wir uns mit einer innovativen und effektiven Lösung.

In modernen Browsern kommt die Pseudoklasse :placeholder-shown zur Rettung. Im Gegensatz zu ::placeholder, das auf Platzhaltertext abzielt, wählt :placeholder-shown speziell leere Eingabefelder aus. Dies bietet eine präzise Möglichkeit, Stile anzuwenden, wenn das Feld keine Benutzereingaben enthält.

Um diesen eleganten Ansatz zu veranschaulichen, beachten Sie die folgende CSS-Regel:

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

Um diese CSS-Regel zu verwenden Tatsächlich ist es wichtig, sich daran zu erinnern, dass das Eingabefeld über ein Platzhalterattribut verfügen muss. Darüber hinaus ist es für die ordnungsgemäße Funktionalität in Chrome-Browsern wichtig, sicherzustellen, dass im Platzhalterattribut ein Leerzeichen vorhanden ist. Dies garantiert, dass die Pseudoklasse :placeholder-shown wie erwartet ausgelöst wird, auch wenn das Eingabefeld für den Benutzer zunächst leer erscheint.

Hier ist ein Beispiel zur Demonstration der Implementierung:

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

Zusammenfassend lässt sich sagen, dass wir durch die Nutzung der Leistungsfähigkeit von :placeholder-shown die Möglichkeit erhalten, leere Eingabefelder mühelos in CSS zu formatieren. Diese innovative Pseudoklasse eliminiert die Einschränkungen des value=""-Selektors und ermöglicht Entwicklern die einfache Erstellung benutzerfreundlicher Formulare.

Das obige ist der detaillierte Inhalt vonWie kann ich leere Eingabefelder mit CSS mit „:placeholder-shown' formatieren?. 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