html - 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 page on focus.

The problem is that the overlaid control is a white rectangle and it looks ugly. Is there a way to disable it, or style it somehow?

UPDATE:

Here is an example from the Android emulator:

The rounded corners and the background are lost. On the actual device, I don't even see a border around the control.

I should probably mention that I'm using jQuery Mobile. My test device is an HTC Evo 4G.

Related questions:

Input has different style on focus

Input-Elements in WebViews always have the same style if highlighted on HTC Devices

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