-webkit-tap-highlight-color未应用于区域标记

Question

Ok, I know this has been asked many times, but my situation is a bit different:

I have an image map and I don't want Android/iPhone to display the green border (gray overlay on iPhone) when an AREA on the image is tapped.

I have tried -webkit-tap-highlight-color: rgba(0,0,0,0) and it seems to work for an <a> link but not an <area> . I guess the problem is that in fact no CSS can be applied to <area> ?

Can this somehow be circumvented? I don't want the user to see the green border when he taps on an area.

Answer 1

Unfortunately, browsers doesn't allow to set(and run) css properties to area tags.

I use maphilight plugin to do that in jquery, it works like a charm : http://davidlynch.org/projects/maphilight/docs/

Example, here : http://davidlynch.org/projects/maphilight/docs/demo_usa.html

Then, I guess that you could set transparent border with : stroke: false