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”.

First Draft of Site Design

Developing a new look for WordPress is a relatively simple task, as long as you know some CSS/HTML basics.

I don’t know how to create beautiful graphics, so I only used simple colors and simple transitions. Totally three blue colors were used, from light to dark. I especially like the sidebar border :) . The ripples mark the beginnings of entries. I discarded the CSS list types but used background images to achieve this effect.

Thanks to the simple structure of WordPress, it didn’t take me much time to make this theme. Of course I will tailor it in the future to make it better-looking.

GoDaddy Gift Cards with other Payments

When I was going to buy this domain from GoDaddy, I realized that I had a gift card with $1 balance. Of course I would not waste it.

I searched and found the “official solution”. It was easy. First choose gift card as payment option, and

If your purchase amount is greater than the amount on your gift card, simply choose another payment method to cover the remaining balance.

I followed the instructions, but on the page where I entered my gift card number, I could only add more gift cards, but couldn’t add other payment methods. I tried to go to next step, with the hope that it would prompt me to choose another payment method. No, it just said the payment couldn’t be verified.

Finally I got the right way to use this “wasted” gift card. Instead choosing gift card as your payment option, you should choose the payment method that you want to cover the balance. I chose paypal, and after returning to the checkout page, I saw the “use gift card” option right below the paypal account information form. GoDaddy first used my gift card, and then requested the remaining balance from my paypal account. Largely the same if you choose paying by credit card.

GoDaddy needs to update their help docs :) .