Wie kann ich leere Eingabefelder mit CSS formatieren und den Stil bei Benutzereingaben entfernen?

Targeting leerer Eingabefelder mit CSS

Frage:

Wie können Sie einen Stil auf ein leeres Eingabefeld anwenden? Stellen Sie sicher, dass es verschwindet, wenn der Benutzer es betritt Text?

Antwort:

In modernen Browsern können Sie die Pseudoklasse :placeholder-shown verwenden, um auf leere Eingabefelder abzuzielen. Hier ist der CSS-Code:

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

Um diesen Effekt zu aktivieren, müssen Sie das Platzhalterattribut zum Eingabefeld in HTML hinzufügen. Beachten Sie, dass Chrome als Wert für Platzhalter mindestens ein Leerzeichen erfordert.

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

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