::placeholder
Learn input hint styles with ::placeholder.
What is ::placeholder?
HTML input and textarea fields carry a hint message through the placeholder attribute, shown when the field is empty. The ::placeholder pseudo-element styles that hint. input::placeholder { color: gray; } turns the hint text gray.
The hint only appears while the field is empty; it disappears once the user starts typing. This pseudo-element changes the hint's style, not the text the user types.
Hint or default value?
placeholder and default value are often confused. A hint goes in the placeholder attribute and shows as faint text while the field is empty; it vanishes once the user types and is never sent to the server.
A default value goes in the value attribute and is the field's real content; it is sent unless the user clears it. So placeholder="Email" gives a hint, while value="@" actually fills the field.
Exercise Set the ::placeholder color
Add a ::placeholder pseudo-element to the input type selector. Inside, set color: gray and font-style: italic. That way the hint text in empty fields becomes gray and italic.
Show example solution
/* add the input hint style */
input::placeholder {
color: gray;
font-style: italic;
}Test yourself
-
What does ::placeholder target?
input::placeholder { color: gray; }- The text the user typed
- The hint text in an empty field
- The input's border
- The label next to the input
Show answer
The hint text in an empty field — Correct. ::placeholder styles only the hint shown while the field is empty.
-
Write the input::placeholder block
input____ { color: gray; font-style: italic; }Show answer
input::placeholder { color: gray; font-style: italic; } -
Match each pseudo-element to its description
- ::placeholder
- Empty input hint
- ::selection
- Selected text
- ::first-line
- First line
- ::before
- Before content