: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 ⁨Januar 2020⁩.

Die :placeholder-shown CSS Pseudoklasse repräsentiert jedes <input>- oder <textarea>-Element, das derzeit 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;
}

<form>
 <label for="name">Full Name:</label>
 <input id="name" name="name" type="text" />
 <label for="email">Email Address:</label>
 <input id="email" name="email" type="email" placeholder="name@example.com" />
 <label for="age">Your age:</label>
 <input
 id="age"
 name="age"
 type="number"
 value="18"
 placeholder="You must be 18+" />
</form>

Syntax

css

:placeholder-shown {
 /* ... */
}

Wenn Formularelemente zu klein sind, kann der Platzhaltertext auf unerwünschte Weise abgeschnitten werden. Sie können die text-overflow-Eigenschaft verwenden, um die Anzeige von überlaufendem Text anzupassen.

HTML

html

<input id="input1" placeholder="Name, Rank, and Serial Number" /> <br /><br />
<input id="input2" placeholder="Name, Rank, and Serial Number" />

CSS

css

#input2:placeholder-shown {
 text-overflow: ellipsis;
}

Ergebnis

[フレーム]

Angepasstes Eingabefeld

Im folgenden Beispiel wird das Feld "Student ID" mit einem benutzerdefinierten Stil hervorgehoben.

HTML

html

<form id="test">
 <p>
 <label for="name">Enter Student Name:</label>
 <input id="name" placeholder="Student Name" />
 </p>
 <p>
 <label for="branch">Enter Student Branch:</label>
 <input id="branch" placeholder="Student Branch" />
 </p>
 <p>
 <label for="sid">Enter Student ID:</label>
 <input
 pattern="[0-9]{8}"
 title="8 digit ID"
 id="sid"
 class="student-id"
 placeholder="8 digit id" />
 </p>
 <input type="submit" />
</form>

CSS

css

input {
 background-color: #e8e8e8;
 color: black;
}
input.student-id:placeholder-shown {
 background-color: yellow;
 color: red;
 font-style: italic;
}