Disable Android Browser's Input Overlays?

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

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;  
    }   
.inFieldlabel {
    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:

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

CSS:

.inputListlidiv.ui-btn-inner {
    background: none;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
    }
 .inputListlabel {
    margin: 3px00!important;
    }
 // styling of text inputs! 
 .inputListinput.ui-input-text, .inputListtextarea.ui-input-text {
    width: 93%; 
    margin-left: 1%;
    padding: 0.6em0;   
    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 
    }
.inFieldlabel { 
    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!