-webkit-tap-highlight-color does not apply to area tag

Question

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

I have an image map and I do not want the Android / iPhone to display a green frame (gray overlay on the iPhone) when listening to AREA on the image.

I tried -webkit-tap-highlight-color: rgba(0,0,0,0) and it seems to work for the <a> link, but not the <area> . I think the problem is that on CSS <area>

Is there any way around this? I do not want the user to see the green border when he clicks on the area.

Answer 1

Unfortunately, browsers do not allow setting (and running) css properties in area tags.

I use the maphilight plugin for this in jquery, it works like a charm: http://davidlynch.org/projects/maphilight/docs/

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

Then I assume that you can set a transparent border with: stroke: false