Disable Android browser's input overlays?

Question

I\'ve got a web page with some text inputs. The Android browser (at least on Android 2.3.4 which is all I\'ve got now) seems to overlay its own control over the input on the

Answer 1

Finally, I solved this problem for Android 2.3 devices.

It is not possible to really remove the overlay, but it is possible to move the overlay outside the viewport.

The overlay tries to position itself to the same position as the input field. It copies the width and the position offset which you assign with

position:relative

and

top:-10000px

But the overlay does not copy the position offsets which are assigned through

-webkit-transform: translate3d()

This causes several issues with JS libraries like iScroll.

But this also helps us to hide the overlay:

input[type="password"], input[type="text"]{
  position:relative;
  top:-10000px;
  -webkit-transform: translate3d(0, 10000px, 0);
}

You place the input field outside the viewport. Overlay positions itself beside it. Now you use translate3d() for moving it to the old position.

We use this solution already in our mobile web framework "qooxdoo Mobile": http://demo.qooxdoo.org/devel/mobileshowcase/index.html#%2Fform

Answer 2

Here is my code:

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

Answer 3

-webkit-user-modify: read-write-plaintext-only;

-webkit-tap-highlight-color:rgba(0,0,0,0); outline-style: none;

This will working fine in Android 4.0 but when you use this code for numeric Input field doesn't support bcoz of read-write-plaintext-only, i got this problem, please anyone suggest.

Answer 4

@czuendorf, May 13 at 13:53: Worked for me too (also Android 4.0).

However... if you use an input with type="number" then the numeric keyboard does not pop-up anymore when you enter the field, but the regular keyboard is shown instead.

If you remove -webkit-user-modify, then the right keyboard is shown again, but the input element is shown with a border while it is being edited. In my case the input overlay messed up the layout (moved some content down and right), but this does not happen anymore with this new css code.

Answer 5

I'm just taking a guess here, and you've probably already tried, but

-webkit-appearance: none;

may do the trick. I've not even got an android device, but on iphone that sorts out most input related styling problems as it strips out the default browser applied styling completely. Worth a shot anyway!

Answer 6

Following code will remove tap highlight - [Android 4.0.3]

input{
   -webkit-user-modify: read-write-plaintext-only;
   -webkit-tap-highlight-color:#3072af;
}