Search code examples
javascriptiphonecssiosiphone-4

iphone 4 links create red semi transparent background/overlay on touch :active

I seem to be having a problem on the mobile version of a site in iphone 4 where when a link is selected a semi transparent red box is overlayed kind of like the outline in ff etc except the full area is red, I thought this could just be an iphone 4 thing but when I checked the bbc website they have a grey overlay so this must be able to be controlled.

I have tried adding background to the :active state in css but this doesnt seem to work, has anyone any ideas what can be done to alter this?

Regards Kyle

Solution

  • Watch the -webkit-tap-highlight-color: CSS property. You can define it to rgba(0,0,0,0); if you want to avoid the effect, or tweak it as you want.

    Also, read the official doc for more info.