CODEWITHSUNDEEP
javascriptandroidhtmlwebkit
Michael Levy
Michael Levy

Reputation: 13287

How to control the orange highlight around html input controls in Android web browser?

On the Android web browser (I'm seeing this on Android 2.3), when an Html input like a radio or checkbox is touched, there is a brief orange highlight displayed (see attached image). I don't see the same highlight on desktop Chrome or other browsers.

Is there anyway I can control this highlight? Can I change it through CSS or Javascript?

enter image description here

Upvotes: 2

Views: 1256

Answers (2)

soundslikeneon
soundslikeneon

Reputation: 416

You can set the -webkit-tap-highlight-color property to an rgba value with 0 alpha to disable all of that.

Here's a quick test page you can try out. I just tested this with Android 4.0.3, but it was taken from some earlier stuff I did in 2.3.3.

Hope this helps!

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta http-equiv="Content-Type" content="text/html" charset="utf-8">  
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">  
        <title>Android Test Select</title>  
        <base href="" />  
        <style>  
            .no-hi {  
                -webkit-tap-highlight-color: rgba(255, 255, 255, 0);  
            }  
        </style>  
    </head>  
    <body>  
        <form>  
            <input type="radio" name="highlight" value="these" /> These<br />  
            <input type="radio" name="highlight" value="should" /> Should<br />  
            <input type="radio" name="highlight" value="highlight" /> Highlight  
            <hr/>  
            <input type="radio" name="no-highlight" value="these" class="no-hi" /> These<br />  
            <input type="radio" name="no-highlight" value="should" class="no-hi" /> Should<br />  
            <input type="radio" name="no-highlight" value="not" class="no-hi" /> Not  
        </form>  
    </body>  
</html>

Upvotes: 2

SpYk3HH
SpYk3HH

Reputation: 22570

Maybe?

input { outline: none; }

or possibly better on focus

input:focus { outline: none; }

Upvotes: 0

Related Questions