How to Change Placeholder Text Color in CSS

By the end of this page, you will understand why selecting an element with a placeholder attribute does not style the placeholder text itself, and how to correctly use the ::placeholder pseudo-element, including older browser-prefixed versions when needed.

The key idea is that the placeholder text inside an <input> is not the same thing as the input element's normal text content.

When you write CSS like this:

input[placeholder] {
  color: red;
}

you are selecting the input element because it has a placeholder attribute. That rule affects the input itself, but browsers often render placeholder text through a special pseudo-element. Because of that, changing the input's color does not reliably restyle the placeholder text.

To style placeholder text, CSS provides a special selector:

::placeholder

This pseudo-element targets the visible placeholder text shown when the input is empty.

Why this matters in real programming:

• Placeholder styling is common in forms.
• Designers often want placeholders to match a theme.
• Accessible interfaces need enough contrast between placeholder text and the background.
• Real projects may need cross-browser support, including older prefixed syntax.

A good mental rule is:

• Element selector styles the input box.
• ::placeholder styles the placeholder text shown inside it.

Think of an input as a labeled container.

• The input element is the box itself.
• The placeholder text is like temporary hint text drawn inside the box.

If you paint the box red, that does not automatically repaint the hint text. To style the hint text, you must target the special part of the box that displays it: ::placeholder.

So instead of saying, "style every box that has a placeholder," you say, "style the placeholder text inside the box."

The modern syntax is:

input::placeholder {
  color: red;
}

Example:

<input type="text" placeholder="Enter your name">

input {
  padding: 8px;
  font-size: 16px;
}

input::placeholder {
  color: red;
}

This changes the placeholder text Enter your name to red.

More complete example

<input type="email" placeholder="you@example.com">
<textarea placeholder="Write your message"></textarea>

input,
textarea {
  padding: 10px;
  border: 1px solid #ccc;
  font-size: 16px;
}

input::placeholder,
textarea::placeholder {
  color: #888;
  opacity: 1;
}

Older browser-prefixed versions

In older codebases, you may still see:

::-webkit-input-placeholder {
  color: red;
}

::-moz-placeholder {
  color: red;
}

:-ms-input-placeholder {
  color: red;
}

::-ms-input-placeholder {
  color: red;
}

::placeholder {
  color: red;
}

These prefixes were needed for older browser engines. In modern projects, ::placeholder is usually enough, but legacy apps may include all of them for compatibility.

Consider this example:

<input type="text" placeholder="Value">

input {
  color: blue;
}

input::placeholder {
  color: red;
}

Here is what happens step by step:

1. The browser creates an <input> element.
2. The input is empty, so the browser shows the placeholder text: Value.
3. The rule input { color: blue; } styles the input's normal text.
4. If the user types Hello, that typed text appears blue.
5. The rule input::placeholder { color: red; } styles only the placeholder text.
6. While the input is empty, Value appears red.
7. As soon as the user enters text, the placeholder disappears.

Small trace example

<input id="username" type="text" placeholder="Username">

#username {
  color: black;
}

#username::placeholder {
  color: gray;
}

• Empty input -> shows Username in gray.
• User types sam -> placeholder disappears.
• Typed text sam appears in black.

Placeholder styling appears in many real applications:

• Login forms: Email address, Password
• Search bars: Search products...
• Contact forms: Your message
• Admin dashboards: Filter by status
• Mobile-friendly forms: subtle guidance inside compact inputs

Practical examples:

• A dark-themed app needs lighter placeholder text so users can read it.
• A design system uses a consistent muted color for all placeholder hints.
• A form builder applies different placeholder colors for normal, error, or disabled states.
• An e-commerce site styles placeholder text to match its brand palette.

In real projects, developers usually style placeholders as part of a reusable form system rather than one-off rules.

Common patterns include:

Shared form styles

.form-input {
  color: #222;
  background: white;
}

.form-input::placeholder {
  color: #999;
}

This keeps all inputs consistent.

State-based styling

.form-input.error {
  border-color: #d33;
}

.form-input.error::placeholder {
  color: #d33;
}

This can hint that a field needs attention.

Theming with CSS variables

:root {
  --input-text: #222;
  --placeholder-text: #888;
}

input {
  color: var(--input-text);
}

input::placeholder {
  color: var(--placeholder-text);
}

This is common in large codebases because themes become easier to maintain.

Guarding readability

Developers often ensure placeholder text is visually distinct from real input text, but still readable enough for users. Placeholder text should usually look like a hint, not actual entered data.

Accessibility note

Placeholder text should not replace labels. In production forms, developers typically use both:

• a visible <label> for accessibility
• placeholder text for an optional hint

1. Styling the input instead of the placeholder

Broken example:

input[placeholder] {
  color: red;
}

Why it fails:

• This selects inputs that have a placeholder attribute.
• It does not directly target the placeholder text rendering.

Correct version:

input::placeholder {
  color: red;
}

2. Forgetting browser-prefixed selectors in older projects

If you work in a legacy codebase, only using ::placeholder may not fully support older browsers.

Safer legacy version:

::-webkit-input-placeholder { color: red; }
::-moz-placeholder { color: red; }
:-ms-input-placeholder { color: red; }
::-ms-input-placeholder { color: red; }
::placeholder { color: red; }

3. Confusing placeholder text with entered text

input {
  color: red;
}

This changes the text the user types, not just the placeholder.

4. Using placeholder instead of a label

This is a UX and accessibility mistake.

Bad pattern:

<input type="email" placeholder="Email">

Better pattern:

<label for="email">Email</label>
<input id="email" type="email" placeholder="you@example.com">

5. Poor contrast

If the placeholder is too light, users may not be able to read it.

Example of a risky choice:

input::placeholder {
  color: #eee;
}

Use a color that remains readable against the background.

color on input vs color on placeholder

Placeholder vs label

/* Modern syntax */
input::placeholder {
  color: red;
}

/* Legacy-friendly version */
::-webkit-input-placeholder { color: red; }
::-moz-placeholder { color: red; }
:-ms-input-placeholder { color: red; }
::-ms-input-placeholder { color: red; }
::placeholder { color: red; }

Key rules:

• input[placeholder] selects the element, not the placeholder text.
• Use ::placeholder to style placeholder text.
• input { color: ... } affects typed text.
• input::placeholder { color: ... } affects placeholder text.
• Placeholder text disappears when the user types.
• Use labels as well; do not rely only on placeholders.

Common pattern:

input {
  color: #222;
}

input::placeholder {
  color: #888;
  opacity: 1;
}

Why doesn't input[placeholder] change the placeholder color?

Because it selects the input element itself, not the special placeholder text rendered inside it.

What CSS selector should I use to style placeholder text?

Use ::placeholder.

Does color on the input affect the placeholder text?

Not reliably for placeholder styling. It mainly affects the text the user types.

Do I still need browser prefixes for placeholder styling?

Usually not in modern projects, but older codebases may still include prefixed versions for compatibility.

Can I style placeholders in textarea too?

Yes. You can use textarea::placeholder the same way.

Should I use placeholder text instead of labels?

No. Placeholders are hints, but labels are still important for usability and accessibility.

Why does the placeholder disappear when I start typing?

That is the normal behavior of placeholders. They are only shown while the field is empty.

• CSS pseudo-elements — ::placeholder is a pseudo-element, like ::before and ::after.
• CSS selectors — helps explain the difference between selecting an element and selecting part of its rendering.
• Form styling — placeholder styling is part of broader input and textarea design.
• Accessibility in forms — placeholders should support, not replace, labels.
• CSS specificity — useful when your placeholder style is being overridden.
• Labels and form semantics — important for building accessible, understandable forms.