Question
How can I change the color of placeholder text in an HTML input using CSS?
For example, the following CSS targets elements that have a placeholder attribute, but it does not change the color of the placeholder text itself:
<input type="text" placeholder="Value">
input[placeholder],
[placeholder],
*[placeholder] {
color: red !important;
}
The placeholder text still appears gray instead of red.
Is there a CSS-based way to style the placeholder text color?
Short Answer
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.
Concept
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.
::placeholderstyles the placeholder text shown inside it.
Mental Model
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."
Syntax and Examples
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>
Step by Step Execution
Consider this example:
<input type="text" placeholder="Value">
input {
color: blue;
}
input::placeholder {
color: red;
}
Here is what happens step by step:
- The browser creates an
<input>element. - The input is empty, so the browser shows the placeholder text:
Value. - The rule
input { color: blue; }styles the input's normal text. - If the user types
Hello, that typed text appears blue. - The rule
input::placeholder { color: red; }styles only the placeholder text. - While the input is empty,
Valueappears red. - As soon as the user enters text, the placeholder disappears.
Small trace example
<input id="username" type= =>
Real World Use Cases
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.
Real Codebase Usage
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 {
: (--placeholder-text);
}
Common Mistakes
1. Styling the input instead of the placeholder
Broken example:
input[placeholder] {
color: red;
}
Why it fails:
- This selects inputs that have a
placeholderattribute. - 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 {
: red;
}
Comparisons
| Approach | What it targets | Use case | Notes |
|---|---|---|---|
input[placeholder] | The input element with a placeholder attribute | Selecting inputs that have placeholders | Does not directly style placeholder text |
input | All matching inputs | Style the input box and entered text | Affects typed text color |
input::placeholder | The placeholder text itself | Correct modern way to style placeholders | Best choice in modern CSS |
| Browser-prefixed placeholder selectors | Placeholder text in older browsers | Legacy support | Useful in older codebases |
color on input vs on placeholder
Cheat Sheet
/* 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
::placeholderto 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;
}
FAQ
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.
Mini Project
Description
Build a small styled form with a text input, email input, and textarea. The project demonstrates how to give placeholder text a custom color while keeping normal typed text separate and readable.
Goal
Create a form where placeholder text has a custom muted color and user-entered text uses a different color.
Requirements
- Create at least one
<input>and one<textarea>with placeholder text. - Style the normal text color separately from the placeholder text color.
- Use the modern
::placeholderselector. - Make the form visually readable with padding and borders.
Keep learning
Related questions
Can You Style Half a Character in CSS? Text Effects with CSS and JavaScript
Learn how to style half of a character using CSS and JavaScript, including overlay techniques for dynamic text effects.
Get Screen, Page, and Browser Window Size in JavaScript
Learn how to get screen size, viewport size, page size, and scroll position in JavaScript across major browsers.
Get the Selected Radio Button Value with jQuery
Learn how to find which radio button is selected in jQuery and get its value with simple examples and common mistakes.