Alex Rivera | Logout

Disable Android browser's input overlays?

Asked 2012-02-23T23:27:11.880
44

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:

enter image description here

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

android html css jquery-mobile android-browser
Edit
Report

1 Answer

1

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

answered 2013-07-19T11:18:37.993

Your Answer