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

Question

Is there a way to remove the default blue hyperlink colour from a telephone number when viewed on an iPhone? Like a specific Mobile Safari tag or CSS to add?

I only have this in place for the number:

<p id="phone-text">Call us on <strong>[phone]</strong></p>

And there are no hyperlinks but iPhone still renders this text number as a hyperlink. I have this rendering issue on some of my websites but can't see why this is occurring.

I did read this post:

Mobile HTML rendering numbers

But is that the only solution possible?

Solution 1

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:[phone]">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.

Solution 2

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..

Solution 3

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.

Solution 4

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>[phone]</strong></p>

your css

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

Solution 5

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.

View more solutions

Comments

[Pekka]

Not entirely sure whether this is the same thing, can you check please? stackoverflow.com/questions/3712475/…

[Chuck]

@Pekka: I think this question is similar but distinct. That was about preventing something from being wrongly interpreted as a phone number. This appears to be about preventing real phone numbers from uglying up your design.

[Brian Rogers]

possible duplicate of How to disable phone number linking in Mobile Safari?

[Reno]

Hi Beausmith, thanks for your answer. Ended up using your first solution in the end a while ago...just wondered if there another solution to the problem.

[Mattias Wadman]

It's probably a good idea to use a[href^=tel:] so that you don't accidently match hrefs to telephone.html etc.

[Lado Lomidze]

@Beau Smith, that worked for me too, but not on iPod 1st Generation's Safari. Is there any specific tag for that old browser?

[kaleazy]

45 answers and still haven't made that the solution? :)

[tahdhaze09]

This is the answer. Had a contact page that the numbers wouldn't show up on iPads and iPhones. This did the trick, thank you!

[cfx]

@MattiasWadman your suggestion did not work for me in Chrome or mobile Safari.

[David Cook]

RE using 'tel:' links to markup phone numbers: it has also been suggested to use microformats as an alternative (ux.stackexchange.com/a/21121/36009).

[TechnoTim]

Thank you for this! Works perfect on Cordova/Ionic.

[karolus]

It works, but breaks link functionality. For needing things in a pinch (like today) it's fine.

[xray1986]

This is the best solution BUT it should be like this I believe: a[href^="tel"]{ color:inherit; text-decoration:none; } At least that's what worked for me. You need the double quotes (" ") as mentioned here: stackoverflow.com/questions/3859101/what-does-ahref-do-in-cs‌​s

[Silverback]

I have added the quotes. While it may work without using quotes the CSS specs do require them for strings. Thanks Panagiotis.

[Rexxo]

Thanks! This has been driving me crazy. Best answer for retaining the functionality too (and should probably be the recognised answer!)

[Rvervuurt]

The CSS from answer is not functioning anymore. Use @Silverback's answer!

[Der_Meister]

Your example did not work for me, but zero-width joiner ‍ did the trick.

[WPExplorer]

If you are using WordPress you can also use our plugin to add the meta tag - wordpress.org/plugins/…

[TechDingo]

This is what I was looking for, all the top comments fail to mention this explicitly.