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.

Ben Roberts

Thank you for reading! I'm Ben, a web developer from Hertfordshire. I love writing about problems I've been able to solve, or very ocasionally, those that I can't. Sometimes I write about other things, such as cybersecurity, which has always fascinated me. If there is anything you'd like help with, or explained better, let me know in the comments below.