remove orange outline from focused element in samsung galaxy s2

Question

Is there a way to turn off the highlight effects used by the mobile browser in the samsung galaxy s2 ?

I already tried:

-webkit-tap-highlight-color:rgba(0,0,0,0)
-webkit-tap-highlight-color:transparent
-webkit-touch-callout: none;
outline:none;

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;

alternatively - can someone explain exactly When those effects show? can I detect a screen touchstart and touchend in a way that does not trigger those effects?

Thanks

I not shure if this will solve your problem but did you try `a:focus { outline: none }`? — doptrois, Jun 03 '12 at 22:20
Do you expect the :focus selector to affect any html tag? or does it work only on "A" tags? basicly my issue is not with a tags but with divs. — epeleg, Jun 04 '12 at 06:26

score 5 · Accepted Answer · edited May 23 '17 at 10:24

5

CSS:

.borderImage {
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}

HTML:

<div class="borderImage">
    <a href="#">Some text</a>
</div>

Found here ;) : -webkit-tap-highlight-color: rgba(0,0,0,0); on a div?

Edit (nice to know):

/* No background, just iOS:*/
-webkit-tap-highlight-color: transparent;

/* No background iOS + Android:  */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

edited May 23 '17 at 10:24

Community

1
1

answered Jun 04 '12 at 14:20

doptrois

1,560
11
10

turns out the problem was that my CSS selector didn't actually hit the desired html elements... – epeleg Jul 16 '12 at 14:09

score 0 · Answer 2 · edited Jun 06 '12 at 05:50

0

Try using e.preventDefault(); on the touch start event.

edited Jun 06 '12 at 05:50

Asherah

18,948
5
53
72

answered Jun 05 '12 at 13:58

bazi

1

I noticed that your response was originally "We had the same problem ...". I am not sure why was this edited out... this is definatly not a me too but a strong indication that you actually resolved the issue - am I right about that ? – epeleg Jun 07 '12 at 13:37

score 0 · Answer 3 · answered Nov 11 '13 at 15:13

0

use this

* {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

}

answered Nov 11 '13 at 15:13

Osvaldo Cipriano

313
1
2
11

remove orange outline from focused element in samsung galaxy s2

3 Answers3