::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

Next lesson: Summary - Decorative heading

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies