CODEWITHSUNDEEP
androidgoogle-chromejquery-mobilewebview
Aaron
Aaron

Reputation: 583

Android: How to disable the default orange borders in webview when click the links

I'm using JQueryMobile to develop a hybird app for android. Anybody who knows how to disable the annoying orange borders in WebView which added by the system when I click the links, buttons.

enter image description here

I tried with the styles -webkit-tap-highlight-color: rgba(255, 255, 255, 0); and -webkit-tap-highlight-color: rgba(0, 0, 0, 0);and 100% sure it does not work on my device.

Is there any configuration or coding I can make in WebView to disable the borders?

Upvotes: 2

Views: 2199

Answers (3)

John Bernardsson
John Bernardsson

Reputation: 1781

I have the following css to remove that orange outline in several HTML elements:

div:focus, div:active, button:focus, button:active, a:focus, a:active { 
    outline: none; 
}

It worked pretty well for me so far ;)

Upvotes: -1

Kayzah
Kayzah

Reputation: 51

Tested on Nexus 10 (Android 4.4.2). This worked for me:

.affected-element {
    outline: 1px solid transparent;
}

Upvotes: 2

PavanBhushan
PavanBhushan

Reputation: 106

body,div{
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

Is this piece of code you're looking for?

Upvotes: 1

Related Questions