-webkit-tap-highlight-color not applied to area tag

问题

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.

回答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

来源：https://stackoverflow.com/questions/8880627/webkit-tap-highlight-color-not-applied-to-area-tag