Disable rectangle (orange border) for text input on focus for Android > 4.0 Webkit

Question

I am building a web app with a cool looking search input. However when I click the input to start typing the input box gets highlighted with a blue border which is fine and it looks good, but in addition to this a white rectangle with an orange border appears over text input and it looks really bad.

I've tried several solutions to this and none of them work. (The CSS styling solutions changing alpha to 0 ect.) [But if you can get those to work on android 4.0 and/or higher then maybe I was doing it wrong and I'll try again]

Others have said that those solutions don't work on the newer Android OS's, which has been my experience as well. I'm personally running Android 4.0.4.

--- Replication of Problem ---

My Android Application & Native Android Browser ...

Chrome Browser for Android ... [ Works fine! ]

Since it works in Chrome then it must be possible to fix. I had thought Chrome was open source so I tried to find their source code so I could possibly find a solution. Source for Android Chrome is not available so it's not open source.

Solution 1

Digging into google.com, they don't have a highlight on their input. What they do have is this:

-webkit-tap-highlight-color: rgba(0,0,0,0);

That clears the ugly orange, misshapen rectangle.

Solution 2

Have you tried setting the outline style to none on focus? You said you have tried css solutions but what have you tried?

It looks to me like an outline on focus which is pretty standard and can be overwritten with

outline: none;
box-shadow: none; /* If this is a box shadow - clear it with this */

Solution 3

re: this fix:

input:focus { -webkit-user-modify: read-write-plaintext-only; }

I tested this on an s3 running 4.0.4 (we were having another problem related to input fields)

It causes an issue whereby text doesn't fill the fields properly when predictive text is turned on, i wouldn't recommend using it.

The issue with input not filling the fields properly (only the first character of every word you type gets entered after you press space!!) is also triggered by having input fields within an element with absolute positioning..

This was the cause of our original issue - probably worthy of another stack overflow post.

Comments

[Timothy Moody]

This is your advice implemented -- jsfiddle.net/TKKm4/33 But it still doesn't take effect for my android app or the native android browser. Possibly it's generated at the android app level. My app does import the webkit, do I need to change something in that library?

[Timothy Moody]

Found the solution --- input:focus { -webkit-user-modify: read-write-plaintext-only; }

[Carl Hine]

Hugo Scott-Slade: Thanks for this. Read the other answers but only your suggestion removed the orange box from my input tag. Super.