How do I remove the blue styling of telephone numbers on iPhone/iOS? How do I remove the blue styling of telephone numbers on iPhone/iOS? ios ios

How do I remove the blue styling of telephone numbers on iPhone/iOS?


Two options…

1. Set the format-detection meta tag.

To remove all auto-formatting for telephone numbers, add this to the head of your html document:

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

View more Apple-Specific Meta Tag Keys.

Note: If you have phone numbers on the page with these numbers you should manually format them as links:

<a href="tel:+1-555-555-5555">1-555-555-5555</a>

2. Can’t set a meta tag? Want to use css?

Two css options:


Option 1 (better for web pages)

Target links with href values starting with tel by using this css attribute selector:

a[href^="tel"] {  color: inherit; /* Inherit text color of parent element. */  text-decoration: none; /* Remove underline. */  /* Additional css `propery: value;` pairs here */}

Option 2 (better for html email templates)

Alternatively, you can when you can’t set a meta tag—such as in html email—wrap phone numbers in link/anchor tags (<a href=""></a>) and then target their styles using css similar to the following and adjust the specific properties you need to reset:

a[x-apple-data-detectors] {  color: inherit !important;  text-decoration: none !important;  font-size: inherit !important;  font-family: inherit !important;  font-weight: inherit !important;  line-height: inherit !important;}

If you want to target specific links, use classes on your links and then update the css selector above to a[x-apple-data-detectors].class-name.


Just to elaborate on an earlier suggestion by David Thomas:

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

Adding this to your css leaves the functionality of the phone number but strips the underline and matches the color you were using originally.

Strange that I can post my own answer but I can't respond to someone else's..


If you want to retain the function of the phone-number, but just remove the underline for display purposes, you can style the link as any other:

a:link {text-decoration: none; /* or: underline | line-through | overline | blink (don't use blink. Ever. Please.) */ }

I haven't seen documentation that suggest a class is applied to the phone number links, so you'll have to add classes/ids to links you want to have a different style.

Alternatively you can style the link using:

a[href^=tel] { /* css */ }

Which is understood by iPhone, and won't be applied (so far as I know, perhaps Android, Blackberry, etc. users/devs can comment) by any other UA.