How Can I Style An Html Input Tag So It Maintains Css When Focused On Android 2.2+?

I was delighted to discover that Android 2.2 supports the position:fixed CSS selector. I've built a simple proof-of concept, here: http://kentbrewster.com/android-scroller/scroller

Solution 1:

This will probably not be resolved until Android switches to using Chrome for its WebView. The current Android browser creates an Android TextView on top of the page when an HTML input field is focussed. Apparently they don't style or position it correctly. You can see it go more wrong on pages that use contentEditable.

The current Chrome-for-Android implements the WebKit IME interface, so input fields are drawn by WebKit (and lose some of the niceties of the Android TextView on ICS) and shouldn't have issues like this.

Solution 2:

The solution is to add:

    input {
        -webkit-user-modify: read-write-plaintext-only;
        -webkit-tap-highlight-color: rgba(255,255,255,0);
    }

in your css.

Solution 3:

You might be able to solve it by using a bug in Android: http://code.google.com/p/android/issues/detail?id=14295.

That is, don't display the input field right away. Instead, display an overlay div which listens on click and hides itself and shows the hidden input, and give the input focus. This somehow prevents Android from using the wierd input that gets placed on top of everything, and is instead using the browsers input field which you can style any way you want.

As you'll note in the bug raport though, this doesn't work with input[type="number"]...