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

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>+44 (0)20 7194 8000</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?

In Joomla Yootheme works for me:

a:not([class]) {
    color: #fff !important;
}

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.

If you don't intend to have any telephone numbers on your page, then <meta name="format-detection" content="telephone=no"> will work just fine. But rhetorically speaking, what if you intend to use a mix of phone and non-phone numbers?

Assuming you're just hard-coding numbers into your HTML, the "insert stuff in the middle of your digits" hacks will work. But they are of little to no use for dynamic pages, such as using PHP to output numerical data from a query.

As an example, I was generating a list of city populations. Some of the populations were large enough to cause Mobile Safari to turn them into phone number links. Fortunately, all I had to do was use PHP number_format() around the array output to insert "thousands" commas:

<?php echo number_format($row["population"]) ?>

This formatting was enough to convince Mobile Safari that there was a somewhat more specific purpose for the number, so it didn't default my larger numbers into telephone links anymore. The same would hold true for the suggestion by @davidcondrey of using <a href="tel:18001234567">1-800-123-4567</a> to specify a purpose to the number.

Bottom line is that Safari Mobile apparently does pay attention to semantics. Given that HTML5 is built around semantic markup, and search engines are relying on semantic markup, I intend to use it as much as I can.

This x-ms-format-detection="none" attribute handle the format phone.

https://msdn.microsoft.com/en-us/library/dn337007(v=vs.85).aspx

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

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.

I’ve been going back and forth between

1.

    <a href="tel:5551231234">

2.

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

Trying to make the same code work for desktop and iPhone. The problem was that if the first option is used and you click it from a desktop browser it gives an error message, and if the second one is used it disables the tab-to-call functionality on iPhone iOS5.

So I tried and tried and it turned out that iPhone treats the phone number as a special type of link that can be formatted with CSS as one. I wrapped the number in an address tag (it would work with any other HTML tag, just try avoiding <a> tag) and styled it in CSS as

.myDiv address a {color:#FFF; font-style: normal; text-decoration:none;}

and it worked - in a desktop browser showed a plain text and in a Safari mobile showed as a link with the Call/Cancel window popping up on tab and without the default blue color and underlining.

Just be careful with the css rules applied to the number especially when using padding/margin.

<meta name="format-detection" content="telephone=no">. This metatag works in the default Safari browser on iOS devices and will only work for telephone numbers that are not wrapped in a telephone link so

1-800-123-4567
<a href="tel:18001234567">1-800-123-4567</a>

the first line will not be formatted as a link if you specify the metatag but the second line will because it's wrapped in a telephone anchor.

You can forego the metatag all-together and use a mixin such as

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

to maintain intended styling of your telephone numbers, but you must make sure you wrap them in a telephone anchor.

If you want to be extra cautious and protect against the event of a telephone number which is not properly formatted with a wrapping anchor tag you can drill through the DOM and adjust with this script. Adjust the replacement pattern as desired.

$('body').html($('body').html().replace(/^\D?(\d{3})\D?\D?(\d{3})\D?(\d{4})/g, '<a href="tel:+1$1$2$3">($1) $2-$3</a>'));

or even better without jQuery

document.body.innerHTML = document.body.innerHTML.replace(/^\D?(\d{3})\D?\D?(\d{3})\D?(\d{4})/g,'<a href="tel:+1$1$2$3">($1) $2-$3</a>');

This did it for me:

.appleLinks a {color:#000000;}
.appleLinksWhite a {color:#ffffff;}

You can find more info here.

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;}

Simple trick worked for me, adding a hidden object in the middle of phone number.

<span style="color: #fff;">
0800<i style="display:none;">-</i> 9996369</span>

This will help you to override phone number color for IOS.

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

Putting the number in a <fieldset> will prevent iOS from converting the number to a link for some reason. In some cases this could be the right solution. I don't advocate a blanket disabling of converting to links.

iOS makes phone numbers clickable by defaults (for obvious reasons). Of course, that adds an extra tag which is overriding your styling if your phone number isn’t already a link.

To fix it, try adding this to your stylesheet: a[href^=tel] { color: inherit; text-decoration: none; }

That should keep your phone numbers styled as you expect without adding extra markup.

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.

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

An old question but as none of the above answers were good for me i post how i resolved it

I have a phone number in a list:

<li class="phone_menu">+555 5 555 55 55</li>

css:

.phone_menu{
  color:orange;
}

But on iPad/iPhone it was black, so i just added this to the css:

.phone_menu a{
  color:orange;
}

If you simply want to avoid phone numbers being links at all try using the font tag:

<p>800<font>-</font>555<font>-<font>1212</p>

According to Beau Smith from this subject: How do I remove the blue styling of telephone numbers on iPhone/iOS?

You should apply "tel:" in the href attribute of your link like this:

<a href="tel:5551231234">555 123-1234</a>

It will remove any additionnal style and DOM to the phone number string.

No need to remove format detection by using <meta name="format-detection" content="telephone=no">. Try using phone number in any tag rather then anchor tag and style it accordingly e.g.: span { background:none !important; border:0; padding:0; }

Try using putting the ASCII character for the dash in between the digit separations.

from this: -

to this: –

ex: change 555-555-5555 => 555–555–5555