Changing an input’s placeholder colour is a small CSS detail that improves form polish — especially on dark themes. Support is good with the standard pseudo-element plus older prefixes where needed.
Modern CSS
input::placeholder {
color: #6b7280;
opacity: 1; /* Firefox defaults lower opacity */
}Broader compatibility pattern
input::placeholder { color: #6b7280; opacity: 1; }
input::-webkit-input-placeholder { color: #6b7280; }
input::-moz-placeholder { color: #6b7280; opacity: 1; }Design tips
- Placeholders are hints — not labels. Keep visible
<label>text. - Contrast must remain readable.
- Don’t rely on placeholder-only instructions for required fields.
- Match dark mode tokens when the UI theme flips — dark mode guide for OS context.
Related form/UI CSS
Layout help: center elements. Links behaviour: open in new tab.
FAQ
Why is Firefox washed out?
Adjust opacity.
Can I animate placeholder colour?
Possible but keep accessibility first.
Does this style <textarea> too?
Yes — target textarea::placeholder.
Style ::placeholder with sufficient contrast, keep real labels, and set Firefox opacity explicitly. Small CSS, clearer forms.
Disclaimer
Sengideons.com does not host any files on its servers. All point to content hosted on third-party websites. Sengideons.com does not accept responsibility for content hosted on third-party websites and does not have any involvement in the same.
