Stephen Keable

How to stop iPhone Safari changing colour of phone numbers

A few times over the years I've produced a site for someone, then noticed that on the iPhone version of Safari it was detecting the phone number in the footer and making it into a link to call the number, which is nice.

However it was also changing the colour of the the link to the standard link blue and adding an underline. This wouldn’t be so bad if the page background wasn’t blue. So after a little digging online I found that you can do two things.

1. Stop Safari from detecting and enabling phone number links with the following meta tag

<meta name="format-detection" content="telephone=no">

2. Add the following to the CSS which will force Safari to keep the original styling

a[href^=tel] {
   text-decoration:inherit;
   color: inherit;
}

I quite like enabling the phone number so opted for the second option.