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

Question

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.

In case people find this question on Google, all you need to do is treat the telephone number as a link as Apple will automatically set it as one.

your HTML

<p id="phone-text">Call us on <strong>+44 (0)20 7194 8000</strong></p>

your css

#phone-text a{color:#fff; text-decoration:none;}

Since we use tel: links on a site with a phone-icon on :before most solutions posted here introduces another problem.

I used the meta-tag:

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

This combined with specifying tel: links site-wide where it should be linked!

Using css is really not an option as it hides relevant tel-links.

a[href^=tel]{
    color:inherit;
    text-decoration: inherit;
    font-size:inherit;
    font-style:inherit;
    font-weight:inherit;