Home/ Questions/Q 7700683
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T22:45:58+00:00

On the Android web browser (I’m seeing this on Android 2.3), when an Html

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0