The ::placeholder pseudo-element is used to style the placeholder text inside <input> or <textarea> elements. It allows you to change the appearance of the placeholder text without affecting the actual value entered by the user.

Key Points

1
::placeholder targets only the placeholder text, not the input's content.
2
You can style properties like color, font-size, font-style, and opacity.
3
Not all CSS properties apply; for example, background does not affect placeholder text.
4
Useful for enhancing form design and user experience by customizing placeholder appearance.

Example: Styling Placeholder Text

In this example, the placeholder text 'Enter your name' appears in gray, italicized, and semi-transparent, while the user's typed input remains unaffected.

Best Practices

1
Use ::placeholder to improve the visual design and readability of forms.
2
Avoid relying solely on placeholders for instructions; include labels for accessibility.
3
Use subtle styling that does not confuse placeholder text with user input.
4
Test across browsers, as placeholder styling may differ slightly in appearance.

Difficulty: 3/10

Topics: placeholder styling, CSS pseudo-elements, form UX

Scenario Questions

0-2 years experience

1
How would you make the placeholder text in a search input appear in light gray instead of the default light blue?
2
What happens if you write input::placeholder { color: red; } but the placeholder doesn’t change color — what’s the first thing you’d check?

2-5 years experience

1
Our form’s placeholder text is invisible on iOS Safari but works fine elsewhere — what’s likely causing this and how would you debug it?
2
A designer wants placeholder text to fade out when the user starts typing, but we can’t use JavaScript — how would you approach this with CSS alone?
3
We’re using a third-party form library and can’t modify the HTML — how would you style the placeholder without touching the component’s source?

5-8 years experience

1
In a high-traffic e-commerce site, we’re seeing layout shifts when placeholders disappear on focus — how would you mitigate this without adding JavaScript?
2
We need to support legacy browsers that don’t recognize ::placeholder — how would you design a fallback strategy that maintains accessibility and visual consistency?
3
A component library uses ::placeholder for visual cues, but screen readers ignore it — how would you ensure the UX remains accessible while keeping the styling?

8+ years experience

1
We’re migrating from a legacy form system that used inline styles for placeholders — how would you architect a CSS strategy that ensures consistent placeholder styling across 50+ micro-frontends without breaking existing behavior?
2
Our design system enforces placeholder contrast ratios for WCAG compliance, but some themes dynamically change background colors — how would you design a scalable, maintainable solution that adapts at runtime without JavaScript?
3
A cross-team initiative wants to standardize form UX across all products, but different teams use different CSS frameworks. How would you propose a unified placeholder styling standard that balances flexibility, performance, and accessibility?

Follow-up Questions

❓What happens if you style ::placeholder but the input has no placeholder attribute?
❓How would you test that your placeholder styles are working across browsers?
❓Why might a placeholder appear too light on some devices even with correct CSS?