iOS a:visited link showing default purple color

Question

On my site, I have a few footer links that are showing the wrong border color for iOS devices when the link is visited. This is happening on Chrome and Safari for iOS.

Desktop

iOS

I searched through my code and I am not setting this style anywhere. I have tried reproducing this in a fiddle/codepen, but since they don't let you redirect, I can't see what the a:visited looks like for mobile.

Code

 .productsalessection { width: 34%; padding-top: 10px; padding-right: 1%; padding-bottom: 10px; float: left; font-family: Lato, sans-serif; } .productsalesbox { width: 100%; padding: 14px 12px; float: left; border-right: 1px solid #e2e2e2; } .productsalesbadge { width: 80px; height: 100%; margin-right: 6px; float: left; border: 1px solid #ddd; border-radius: 4px; background-color: white; } img { max-width: 100%; vertical-align: middle; display: inline-block; } .productsalesheading { margin-top: 3px; color: #444; font-size: 16px; font-weight: 400; text-transform: uppercase; } .productsalestext { font-size: 12px; line-height: 14px; color: #777; } 

 <a class="w-clearfix productsalessection" target="_blank" href="http://www.google.com"> <div class="w-clearfix productsalesbox"> <div class="productsalesbadge"><img src="http://www.chicmarket.com/images/SJ.svg"> </div> <div class="productsalesheading">Trusted</div> <div class="productsalestext">We proudly maintain a strong relationship with our customers.</div> </div> </a> 

Changing the color of the a:visited works.

a:visited {
  color: #C8C8C8;
}

But this solution is not ideal because this will mess with other a tags on my site.

I have also tried.

a:visited {
  color: rgba(0, 0, 0, 0.0);
}

But instead of making the color transparent, it just makes the border black.

I don't normally post links to external sites, but if you would like to take a look and see the problem for yourself, you can check it out here .

Is there a simple fix for this that doesn't require me to set the a:visited color for each a tag that I have?

Answer 1

Looks like this was only happening to borders of divs inside of <a> tags on mobile. In order to fix this I had to not only set color: rgba(0, 0, 0, 0.0); for a:visited , but I had to select the specific div that had the border.

a:visited .productsalesbadge {
    color: rgba(0, 0, 0, 0.0);
}

This completely removed the purple visited border I was seeing on mobile.