How to turn off link effect on iPhone/iPod/iPad (CSS)?

Question

Information: I suppose you've seen this dark box appear around a link when you click it on an iPad/iPod/iPhone. If not, click a link, and you'll see it appear and disappear when the new page has loaded.

I have a webapp that is going to be used on all platforms. I use p-tags as links because I don't want a lot of the a-tag default functionality and appearance, and the links are executed via JavaScript.

The problem is that even though I use p-tags, the iPad displays this annoying dark box around the link when you click on it. The dark box is useful to tell the user that they actually managed to click the link while the next page loads, but this webapp loads stuff from localStorage, so there is no need to have this box that clutters the GUI...

How can this box be removed?

Answer 1

Your reason to use paragraph (p-tags) for links is completely a mystery to me. You can control styling via CSS, no matter what tag it is. P-tags are for paragraphs, A-tags are for links. That's the most basic thing in HTML semantics I can think of.

The box you are refering to is "-webkit-tap-highlight-color" See http://css-infos.net/property/-webkit-tap-highlight-color