Category: css

Firefox Placeholder Bug

Firefox logo.

My latest client has designed a form input field with a black background (the site has a deliciously dark color scheme). For contrast purposes he included a pure white placeholder, and a nice hover effect to complete the UX, successfully distinguishing the placeholder from the input text.

Now, when I came to create the styles for the input field, I obviously changed the color of the placeholder with:

input::placeholder { color: #fff; }

Nope. It wasn’t white. So into dev tools I went, as you do. The white color was clear as day. Nothing obvious changing it to the medium grey it had now become. No inherited opacity issue, no z-index messing things up. Nothing.

After about half an hour of pulling my hair out, something reminded me to check the field in Chrome. Oh. Whiter than white. Perfect.

You see, turns out that Firefox (still) adds an opacity (0.54 to be exact) on placeholders. No one else does. It’s just a quirk, that has never been resolved (not for want of trying mind, see this rather heated exchange on Bugzilla). Explicitly setting the placeholder opacity to “1” did the trick.

So there we go.