Search code examples
htmlcsssamsung-mobileoutline

remove orange outline from focused element in samsung galaxy s2

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

Solution

  • 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);