The :placeholder-shown pseudo-class in CSS targets input or textarea elements that are currently displaying their placeholder text. This allows you to style elements differently when they are empty and showing a placeholder.

Key Points About :placeholder-shown

1
Applies only to form elements with a placeholder attribute that is currently visible.
2
Helps indicate an empty state visually or apply custom styling when input is not yet filled.
3
Once the user enters text, the element no longer matches :placeholder-shown.

Example: Using :placeholder-shown

In this example, inputs with visible placeholders have a dashed gray border and light gray background. When the user types into the input, the border turns solid green and the background becomes light green, providing a clear visual cue.

Best Practices

1
Use :placeholder-shown to differentiate empty inputs from filled inputs.
2
Combine with transitions for smooth visual feedback as the user types.
3
Do not rely solely on color; provide additional cues for accessibility.
4
Test across browsers, as placeholder behavior may vary slightly.

Difficulty: 3/10

Topics: form placeholder styling, user experience, CSS pseudo-classes

Scenario Questions

0-2 years experience

1
How would you style a form input to turn its border red only when the placeholder is visible, but revert to gray when the user starts typing?
2
What happens if you apply :placeholder-shown to an input that already has text in it — does the style still apply?

2-5 years experience

1
A form looks broken on mobile: the placeholder text is invisible, but the input border is still red. What could be causing this, and how would you debug it using :placeholder-shown?
2
We’re seeing inconsistent placeholder styling across Safari and Chrome. How would you approach making it consistent without breaking other form elements?

5-8 years experience

1
We’re building a reusable form component library and want to support dynamic placeholder text. How would you design the CSS to ensure :placeholder-shown works reliably across all input types without requiring developers to write custom styles each time?
2
A legacy form uses inline styles and JavaScript to toggle placeholder appearance. How would you migrate this to use :placeholder-shown while maintaining accessibility and performance?

8+ years experience

1
Our design system has hundreds of forms across 12 products, and placeholder styling is inconsistent. How would you architect a scalable, maintainable solution using :placeholder-shown that can be adopted across teams without breaking existing behavior?
2
We’re planning to deprecate legacy placeholder JavaScript hacks. What migration strategy would you propose to ensure zero UX regression, especially for users with assistive technologies, while adopting :placeholder-shown at scale?

Follow-up Questions

❓What happens if you apply :placeholder-shown to a textarea that has no placeholder attribute?
❓How would you test that your placeholder styles are working correctly across browsers?
❓Why might a user see unexpected styling on a filled input even when you used :placeholder-shown?