Disable Android browser's input overlays?
Solution 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
Solution 2
Following code will remove tap highlight - [Android 4.0.3]
input{
-webkit-user-modify: read-write-plaintext-only;
-webkit-tap-highlight-color:#3072af;
}
Solution 3
Not sure this is a working solution and answer, but my inputs started playing along on Android after commenting out these, which all created havoc on my Android (HTC2.3) text inputs 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 default inputs, I'm using these:
/* native placeholder styling */
::-webkit-input-placeholder {
color:#555555;
}
:-moz-placeholder {
color:#555555;
}
.inField label {
color:#555555;
cursor: text;
}
After commenting out the first webkits, Android is working ok for me. I'm overriding plenty of other stuff, too though.
Also check out the screenshot below:
What I did with my inputs is create a listview, put all my inputs into list items and strip all input-JQM-CSS. This should give you a transparent input sitting on top of a listview item, which I think looks really good. You can also add labels to the inputs, my example is set up to work with the inField label plugin, so you have all these classes on board already, too.
The screenshot is from my Android HTC 2.3.5 and shows an input type="search". It's a listview search filter, which I stripped of most JQM-css. I have removed it from the listview further down, placed it into my form-list, added a label (can't see if active) and stripped all CSS, including icons.
Here is an example of how I'm doing my list-forms:
<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;
}
I hope this is all CSS. If you are trying to set this up and it looks crummy, let me know.
Working like this looks very nice on my HTC 2.3.4 My CSS still needs some polishing. I need to decrease the inputs width and align: center, so the borders of the below list item stay visible.
Other than that this would be a nice solution to crummy Android inputs. Just strip all JQM-CSS and put a listview-li behind.
Solution 4
Here is my code:
input {
-webkit-user-modify: read-write-plaintext-only;
-webkit-tap-highlight-color: rgba(255,255,255,0);
}
Solution 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!
Related videos on Youtube
Alex Korban
I'm excited about the changes in C++11 and C++14. I've written books about the C++11 & C++14 features in Visual Studio 2013, GCC & Clang, because I couldn't find a book for experienced C++ developers with that focus. Check out C++ Rocks for more info. My company: aoteastudios.com Personal blog: korban.net
Updated on January 16, 2020Comments
-
Alex Korban over 4 years
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
-
whlk about 12 yearsCan you post a screenshot with a sample? Can't quite imagine what is happening.
-
Alex Korban about 12 years@Mannaz: I've updated the question, thanks for having a look.
-
Pedantic about 12 yearsThis is even more evident on later versions, specifically 4.0.3. The text field floats somewhere randomly. Following.
-
Alex Korban about 12 years@Chris, are you using
translate3d
in your CSS? You could try the solution from this blog: java-cerise.blogspot.co.nz/2011/10/…. If that doesn't work, I also read elsewhere that you might have to add translate3d(0,0,0) to each individual input. That only solves the positioning problem though I think. -
Phill Pafford about 12 yearspossible duplicate of Input-Elements in WebViews always have the same style if highlighted on HTC Devices
-
Pedantic about 12 yearsI don't use webview in my own app. Recently upgraded one of my test devices (HTC Sensation) to 4.0.3 and see the issue in 3rd party apps, including the default browser and apps that use webview. Can't be much more help, just confirming. By the way (not surprised here) the worst offender is MS Exchange on the default HTC/ICS browser. Sometimes the unstyled textfield shows up offscreen.... :( I'll try to post a screenshot.
-
Pedantic about 12 yearsBear in mind Sense 3.6 (in the test RUU I have) and 4.0.3 are unsupported by HTC currently. Have 2.x and 3.x devices that don't have test ICS environments to check at the moment.
-
Alex Korban about 12 years@Phill: yeah, I listed that in the question. The answer there suggests a native app as a "workaround", it's not an option for me.
-
-
frequent about 12 yearsstill gives you the white box
-
Alex Korban about 12 yearsjQuery Mobile applies that style already, so it doesn't help.
-
Alex Korban about 12 yearsI'm not using the problematic styles you mentioned. Android cheerfully ignores the input:focus styling I'm applying. I'm pretty sure this is because it actually overlays another input over my input on focus. I'd like to get rid of this overlaid input, or find a way to style it.
-
frequent about 12 yearsnot sure if this is possible at all. That's why I started my workaround. Still let's see what else comes up.
-
Jamis Charles about 12 yearsAssuming that a fix something on iPhone will fix something on Android is a false assumption. Trust me :).
-
will about 12 yearsStill, like I said: Worth a shot ;)
-
Andrew Ferrier about 12 yearsAm a bit confused; when you say "commenting out these", where are you commenting them out from? Are these standard JQuery Mobile styles?
-
frequent about 12 years@AndrewFerrier - nope. Can't recall exactly where I got these CSS from, but bottom line: try to get by without them, if you want your inputs (especially selects) to work on Android. Also in the future, check here for mobile OS bugs (github.com/scottjehl/Device-Bugs) and how to solve them.
-
Christian Kuetbach over 11 yearsWith -webkit-user-modify: read-write-plaintext-only; I had some Issues. I was unable to input something in the beautiful inout field.
-
falko over 10 yearsTnx! Solve scroll problem with iscroll 5 on android 4.0.4
-
will over 10 yearsTry selecting your inputs more specifically then. How about
input:not([type="checkbox"]):not([type="radio"])
-
Roman M. Koss about 10 yearsDUDE! YOu are a miracle!
-
falko about 10 yearsRelated issue: How about setting cursor to end of input field after lost focus?