Disable browser overlay on Android?

Question

I have a webpage with some text inputs. The Android browser (at least on Android 2.3.4, which has everything I have now) seems to impose its own control over the input on the page in focus.

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

UPDATE:

Here is an example from the Android emulator:

Rounded corners and background are lost. On the device itself, I don’t even see the border around the control.

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

Related questions:

Input has a different focus style

WebView input elements always have the same style when 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 you can move the overlay outside the viewport.

The overlay tries to position itself in the same position as the input field. It copies the width and offset of the position you assign using

position:relative 

and

 top:-10000px 

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

 -webkit-transform: translate3d() 

This causes several problems with JS libraries such as iScroll.

But it also helps us hide the overlay:

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

You put an input field outside the viewport. The proper position is located next to it. Now you use translate3d () to move it to its previous position.

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

Answer 2

The following code will remove highlight highlighting - [Android 4.0.3]

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

Answer 3

Not sure if this is a working solution and answer, but my inputs started playing on Android after commenting that everything created chaos on my Android text inputs (HTC2.3) and selects

 /* really bad */ -webkit-backface-visibility: hidden; /* your normal bad */ -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); transform: rotateY(0deg); 

If you want to style the default input, I use the following:

 /* native placeholder styling */ ::-webkit-input-placeholder { color:#555555; } :-moz-placeholder { color:#555555; } .inField label { color:#555555; cursor: text; } 

After commenting on the first web whales, Android is working fine for me. However, I surpass many other things.

Also view the screenshot below:

What I did with my inputs was to create a list, put all of my inputs into list items, and remove all JQM-CSS inputs. This should give you transparent input sitting on top of the list item, which, it seems to me, looks really good. You can also add labels to the inputs, my example is configured to work with the label inField plugin, so you already have all these classes on board.

Screenshot from my Android HTC 2.3.5 and shows the input type = "search". This is a list search filter that I stripped of most JQM-css. I removed it from the list down, placed it in my list of forms, added a shortcut (I don’t see if it is active) and shared all CSS, including the icons.

Here is an example of how I make my form lists:

  <ul data-role="listview" data-inset="true" class="inputList"> <li data-role="fieldcontain" data-icon="false" class="inField ui-btn ui-corner-top" data-theme="c"> <div class="ui-btn-inner" aria-hidden="true"><div class="ui-btn-text"> <label for="item">item</label> <input type="text" name="item" id="item" /> </div></div> </li> <li data-role="fieldcontain" data-icon="false" class="inField ui-btn ui-corner-bottom" data-theme="c"> <div class="ui-btn-inner" aria-hidden="true"><div class="ui-btn-text"> <label for="item2">item2</label> <input type="text" name="item2" id="item2" /> </div></div> </li> </ul> 

CSS

 .inputList li div.ui-btn-inner { background: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; } .inputList label { margin: 3px 0 0 !important; } // styling of text inputs! .inputList input.ui-input-text, .inputList textarea.ui-input-text { width: 93%; margin-left: 1%; padding: 0.6em 0; text-indent: 80px; /* hard-coded - doesn't work on Android */ border-width: 0px; background: transparent; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; -moz-border-radius:0px; -webkit-border-radius: 0px; border-radius: 0px; } .inputList .ui-li-divider:not(.input-divider), .inputList .ui-li-static, .inputList .ui-li-has-alt, .inputList .ui-link-inherit, .inputList .ui-btn-icon-notext .ui-btn-inner { padding: 0px !important; } // labels, from inField label plugin, but not active .inField { position:relative } .inField label { line-height: 2.25em; vertical-align: middle; position:absolute; left:8pt; width: inherit !important; } 

Hope this is all CSS. If you are trying to fix this and it looks concise, let me know.

Working with this looks very good on my HTC 2.3.4. My CSS still needs to be polished. I need to reduce the width of the inputs and align: center, so the borders of the bottom list remain visible.

Also, this would be a good solution for Android starchy inputs. Just split all the JQM-CSS and put listview-li.

Answer 4

Here is my code:

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

Answer 5

I’m just guessing here, and you probably already tried, but

 -webkit-appearance: none; 

can do the trick. I don’t even have an Android device, but on an iphone, which resolves most of the problems associated with input difficulties, as it completely removes the standardized browser style. Anyway, worth it!

Answer 6

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

-webkit-tuk-zest color: RGBA (0,0,0,0); outline-style: none;

This works fine in Android 4.0, but when you use this code for a numeric input field, bcoz is not supported for read-write-only plain text, I have this problem, please take note.

Answer 7

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

However ... if you use an input with type = "number", then the numeric keypad no longer pops up when you enter a field, but a regular keyboard is displayed instead.

If you delete -webkit-user-modify, then the correct keyboard is displayed again, but the input element is displayed with a frame during editing. In my case, the input overlay messed up the layout (moving the contents down and to the right), but this no longer happens with this new css code.

Answer 8

I confirm the macnerd analysis of the czuendorf patch. This behavior varies greatly from one version of Android to another. I tested it on a real Htc device with Android 4.0.3, and the outline disappeared (excellent!), But it opens up some serious keyboard problems (I see that one click does not appear in the field and other strange behaviors ...), There are no keyboard problems with the emulator. I did not find a solution for a real device. It's a shame!