Readonly Text Input Background Color in Firefox

The other day I was stuck when trying to make the background-color of a readonly text input white in Firefox.

Today lots of sites are using readonly text inputs to carry out some urls for propagation or some code snippets for embedding in your own pages. For example, every Youtube video has such a input field just on the right of it. When you click on it, the text gets selected and you can press Ctrl+C to copy it to the clipboard.

The code is like this:

<input type="text" readonly="readonly" value="some read only text..." onclick="this.select()" />

and the rendered output:

In all other major browsers it looks like a normal text input. But in Firefox, the background color is made gray (#D6D5D9, actually), maybe emphasizing the difference. There are always cases when we want to make it white. But when added “background-color:#FFFFFF;”, it showed no difference. At that time I thought I couldn’t change the background color.

But soon I found the “white” text input when watching this video (I love the puppy!). After inspecting the code with Firebug I found it was “border:1px solid #D2D2D0” who did the trick. Adding it to the example code above:

Then I found that the background color is ok with any color except #FFFFFF. For example, setting it to “#FEFEFE” (Almost white. And note the default border style is “outset”):

Weird, isn’t it? I don’t know if it’s a bug or “feature”.

2 thoughts on “Readonly Text Input Background Color in Firefox”

  1. It seems like firefox has changed somewhat since your posting, but its still somewhat unpredictable.

    I’d say “bug” is about right, but maybe more of a tradeoff of using the standard system widgets by default. They look good, and look familiar to people, but they’re not as customizable. So once you go changing things, there’s a high likelihood you’ll venture into a territory that requires it to stop using the system widgets, and firefox starts from scratch doing things its own way.

    Here’s a note from a bug with a similar complaint:
    https://bugzilla.mozilla.org/show_bug.cgi?id=379041#c10

Leave a Reply

Your email address will not be published. Required fields are marked *

Prove your intelligence before hitting * Time limit is exhausted. Please reload CAPTCHA.