:placeholder-shown
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Die :placeholder-shown
CSS Pseudoklasse repräsentiert jedes - oder
-Element, das aktuell Platzhaltertext anzeigt.
Probieren Sie es aus
label {
display: block;
margin-top: 1em;
}
input:placeholder-shown {
background-color: ivory;
border: 2px solid darkorange;
border-radius: 5px;
}
Syntax
css
:placeholder-shown {
/* ... */
}
Beispiele
Einfaches Beispiel
Dieses Beispiel wendet spezielle Schrift- und Rahmenstile an, wenn der Platzhalter angezeigt wird.
HTML
html
CSS
css
input {
border: 1px solid black;
padding: 3px;
}
input:placeholder-shown {
border-color: teal;
color: purple;
font-style: italic;
}
Ergebnis
Überlaufender Text
Wenn Formularfelder zu klein sind, kann der Platzhaltertext auf unerwünschte Weise abgeschnitten werden. Sie können die text-overflow
-Eigenschaft verwenden, um die Anzeige des überlaufenden Textes zu ändern.
HTML
html
CSS
css
#input2:placeholder-shown {
text-overflow: ellipsis;
}
Ergebnis
Anpassungsfähiges Eingabefeld
Das folgende Beispiel hebt das Feld "Student ID" mit einem benutzerdefinierten Stil hervor.
HTML
html
CSS
css
input {
background-color: #e8e8e8;
color: black;
}
input.student-id:placeholder-shown {
background-color: yellow;
color: red;
font-style: italic;
}
Ergebnis
Spezifikationen
Specification |
---|
HTML # selector-placeholder-shown |
Selectors Level 4 # placeholder-shown-pseudo |
Browser-Kompatibilität
Siehe auch
- Das
::placeholder
Pseudoelement stylt den Platzhalter selbst. - Verwandte HTML-Elemente:
,
- HTML-Formulare