The CSS ::placeholder selector
The CSS ::placeholder pseudo-element styles the placeholder text in an empty <input> or <textarea> — input::placeholder { color: #94a3b8; }. Keep it readable: placeholder text is often too faint by default, and it should never replace a real <label>.
Overview
::placeholder targets the hint text shown inside an empty form field — the "Search…" or "you@example.com" that disappears once the user types. You can set its color, font and style: input::placeholder { color: #94a3b8; font-style: italic; }.
The most common adjustment is contrast. Browser-default placeholder text is frequently too light to read comfortably, which is an accessibility problem — so the usual job of this selector is to darken it to a legible gray. Note that only certain properties apply (color, font, opacity and a few others); you cannot, for instance, change its alignment from here.
The bigger point is conceptual: a placeholder is not a label. It vanishes as soon as the user starts typing, taking its hint with it, and it is not reliably announced as a field's name. Always give fields a real <label>, and treat the placeholder as a supplementary example, not the primary instruction.
Syntax
input::placeholder,
textarea::placeholder {
color: #64748b;
font-style: italic;
}Example
<style>
.field { font: 15px system-ui, sans-serif; padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 8px; width: 220px; }
.field::placeholder { color: #1c7ce9; font-style: italic; }
</style>
<input class="field" placeholder="Styled placeholder text">Best practices
- Darken default placeholder text so it is comfortably readable — many browser defaults fail contrast.
- Never use a placeholder in place of a real <label>; the hint disappears as the user types.
- Keep placeholder text as a brief example or format hint, not essential instructions.
- Remember only a subset of properties (color, font, opacity) apply to
::placeholder.
Accessibility
Placeholders cause two recurring accessibility problems. First, the default color is often too low-contrast to read; bump it up so it clears the usual text-contrast guidance. Second, and more important, a placeholder is not a substitute for a label — it disappears on input, leaving the user with no reminder of what the field is for, and screen readers do not treat it as the field's name. Always pair every field with a visible, associated <label>.
Frequently asked questions
How do I change placeholder text color in CSS?
input::placeholder { color: #64748b; }. Choose a color with enough contrast to stay readable.Why is my placeholder text so light?
::placeholder and a darker color for readability.