CODEWITHSUNDEEP
androidgoogle-chromewebviewwebkitandroid-4.0-ice-cream-sandwich
Timothy Moody
Timothy Moody

Reputation: 519

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

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

enter image description here

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

enter image description here

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.

Upvotes: 2

Views: 11289

Answers (4)

miljbee
miljbee

Reputation: 350

I don't think this is related to css/javascript.

I have already seen this behaviour when I enabled "Improve Web accessibility" in the device settings.

Try to go in your device general settings (not the browser's settings), Accessibility, and check if you have something like "Improve Web Accessibility" (Sorry, my device langage is french, I am not sure of the exact name in english).

When this option is checked, you will see big orange borders around editable / clickable content on web pages.

Upvotes: 0

eighteyes
eighteyes

Reputation: 1314

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.

Upvotes: 5

Rowan
Rowan

Reputation: 626

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.

Upvotes: 1

Hugo Scott-Slade
Hugo Scott-Slade

Reputation: 897

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 */

Upvotes: 5

Related Questions