22

I want to develop a web application using HTML, CSS and Javascript one thing that is really annoying is that any link or button etc when clicked inside the Android browser gets highlighted with a green border.

To demonstrate what I mean I have included a link to a page that contains a basic game written in CSS

http://marbles2.com/app/

Is there any way that you are aware of to disable the click green border?

Cheers

Paul

1
  • 2
    Hey, that's a really fun game. I think I'm going to make an android app out of it...
    – Derek
    May 26, 2010 at 0:47

2 Answers 2

46

In your CSS stylesheet (the one in your web application), add this:

* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);  
}
3
  • 2
    This certainly disables the color, but it should be noted that this seems to be an all or nothing type of thing. For example, doing -webkit-tap-highlight-color: rgba(255,255,255,1) - which should get you a solid white, gets you the default green again. Jul 20, 2010 at 19:49
  • @RussellUresti: You are right... The problem is that the green border is not because of CSS but because of the Android browser so yes, the only way of getting rid of it is to disable it. As far as I am aware of, there seems to be no way of changing the color of the border.
    – Legend
    Jul 20, 2010 at 20:04
  • Fantastic. This is a pain for anybody writing a web game in JavaScript.
    – mgiuca
    Sep 28, 2011 at 11:52
6

Try this in your style:

style="-webkit-tap-highlight-color:rgba(0, 0, 0, 0);"

Hope this helps.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.