Question

When I set the background color of a , it will appear with that background color in the android stock browser. However, once I click on that textarea, the background color will change to white — always. Is there a way to keep the background color when the user is focused on the field?

EDITED: Originally about iOS, I had it mixed up. Works on iOS, doesn’t work on android. An example is the following link

http://www.domedia.org/oveklykken/css-textarea-background.php

while this is using background-img and not background-color, the same phenomenon happens.

Answer 1

This is browser feature that you probably cannot override (and if you could, you would confuse users). The Android browser works in an environment where the contrast between background and text in input areas must be clear, so the design decision is quite understandable.

You can set the properties of the area in focused state, and this takes effect e.g. when the element has the autofocus attribute. But the standard Android input mechanism appearance still takes over when the user actually activates the area.