Android | How to disable the highlight / outline

[Henry]

Hey All,

Anyone know if there is a way to disable that highlight / outline that
occurs when you click on either an anchor or something with onclick?
Since it takes a second for the action to occur, the user sees a
orange/green (depending on device) outline of the element that they
clicked.


Any ideas?

Thanks!

[Joe McCann]

In your CSS stylesheet, do this:

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

Setting the alpha value here to zero should make it "invisible".

However, from a user experience perspective, it is important for the
user to know when something is focused/tapped so I would recommend
removing it altogether.

joe

[Henry Levak]

that webkit attribute worked perfectly.. i was thinking that the highlight was coming from Android..

thank you Joe!!

--
You received this message because you are subscribed to the Google
Groups "phonegap" group.
To post to this group, send email to phon...@googlegroups.com
To unsubscribe from this group, send email to
phonegap+u...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/phonegap?hl=en?hl=en

For more info on PhoneGap or to download the code go to www.phonegap.com

[D. Rimron]

> that webkit attribute worked perfectly.. i was thinking that the
> highlight was coming from Android..

It is. It's compiled into the Android version of webkit as a default CSS
style, setting the webkit attribute overrides the compiletime value....

-Dx

[Jason]

I've tried this approach and it works fine, but is there a way to
remove the focus border box? If you don't know what you're referring
to, go browse anything using the android default browser. If you tap
on a text input element, the highlight box (usually orange or green
depending on OS version) appears. Adjacent to this highlight box is an
inner black/gray rectangle.

With the below CSS styling, my text input element has no border by
default (which is what I need), but when it gets tapped, the rectangle
mentioned above appears without the tap-highlight.

border-style:none;
outline-style:none;
display: inline-block;
-webkit-appearance: textarea;
-webkit-tap-highlight-color: rgba(0,0,0,0);

Does anyone know how to remove it?

[Kerri Shotts]

What device and platform version?

______________________________

Kerri Shotts

photoKandy Studios LLC

📱 Phone: +1 (312) 380-1035

🌐 Web: http://photokandy.com 

Twitter: @photokandy

On Aug 14, 2012, at 13:16, Christian Schmitz <kata...@gmail.com> wrote:

Hi All

I don't know what I am doing wrong but my input fields become still highlighted. I read about it is because webview renders a textview over the input field which I can see when I scroll the screen (the new field is moving a little bit slower over the original field).

So, I am using phonegap and webview to display my webapp. The highlight is there and with css I can't remove it.

I tried anything found at the net but nothing removes the outline. Does anybody know any solution or tutorial site for this issue? Or am I doing something wrong?

Thanks for any hints.
Cheers

--

-- You received this message because you are subscribed to the Google
Groups "phonegap" group.
To post to this group, send email to phon...@googlegroups.com
To unsubscribe from this group, send email to
phonegap+u...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/phonegap?hl=en?hl=en
 
For more info on PhoneGap or to download the code go to www.phonegap.com
 

To compile in the cloud, check out build.phonegap.com
 
 

[Christian Schmitz]

Hi Kerri

I just upgraded my samsung galaxy s2 to android version 4.0.3.

Cheers

[madhu latha]

Hi,

use the below line in your css file so that the fields doesn't highlight

* {

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

}

On Tue, Aug 14, 2012 at 10:06 PM, Christian Schmitz <kata...@gmail.com> wrote:

Hi All

I don't know what I am doing wrong but my input fields become still highlighted. I read about it is because webview renders a textview over the input field which I can see when I scroll the screen (the new field is moving a little bit slower over the original field).

So, I am using phonegap and webview to display my webapp. The highlight is there and with css I can't remove it.

I tried anything found at the net but nothing removes the outline. Does anybody know any solution or tutorial site for this issue? Or am I doing something wrong?

Thanks for any hints.
Cheers

Am Sonntag, 26. September 2010 03:03:02 UTC+2 schrieb Hank:

--

-- You received this message because you are subscribed to the Google
Groups "phonegap" group.
To post to this group, send email to phon...@googlegroups.com
To unsubscribe from this group, send email to
phonegap+u...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/phonegap?hl=en?hl=en
 
For more info on PhoneGap or to download the code go to www.phonegap.com
 
To compile in the cloud, check out build.phonegap.com
 
 

--

Thanks & Regards,

Madhulatha

[Christian Schmitz]

Hi madhu

As I already wrote.. on my side, css has absolutley no inpact on how the input fields get displayed on focus.

There is an other element displayed on top of my input element. That guess matches stuff I read about andorid and inputfields on focus.


Here is an post at stack about:
http://stackoverflow.com/questions/3910708/how-can-i-style-an-html-input-tag-so-it-maintains-css-when-focused-on-android-2

So, what I really do not understand is, why is it working for people like you and not on my side..

Thanx for your answer anyway.
Cheers

[Carlos Cirne]

Hi,

did you find a way to remove highlight box from android? i have the same problem and when i am focusing in box and scroll up or down the box still there static. please let me know if you figure out about that. thanks

[elsigh]

Bump..

I have been using -webkit-user-modify: read-write-plaintext-only; which does in fact keep the gnarly orange border from showing up in ICS (S3 in my case) when a text input is focused, but it has a terrible side effect - text inputs behave more slowly than they should and the speech-input mechanism doesn't work well at all - I've isolated it down to this one CSS property!

Is there a Java solution we might employ? grrrrr (grabs icepick, pokes eyeballs)

[AdisAksh]

Thank you so much. It's workin fine to me.

[Varghesekutty M]

Thanks, it worked for me :)

[Varghesekutty M]

Thanks Joe. It worked for me :)

[Lijoosh C]

Thank you Joe!! It really helped

On Sunday, September 26, 2010 8:28:56 PM UTC+5:30, Joe McCann wrote: