iOS phone number styling

iOS has an automatic feature to detect phone numbers and link them to a phone call by clicking on them.

The problem with this is twofold:

  1. Many false positives 
  2. Style for these numbers is really ugly (ugly as in default link style).

OPTION 1

If you want to avoid this feature you can add the following meta in your pages:

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

which will avoid the phone to make calls to ALL phone numbers in your page. To reactivate this key functionality in some of the numbers, you need to add a link around each telephone number in your page, manually, using tel: as the beginning of the href, as in:

<a hef="tel:1234567890">1234567890</a>

Then we just need to style the special links:

a[href^="tel:"] {color: inherit !important; background-color: inherit !important;}

OPTION 2

Since in some projects you will not be able to wrap numbers manually and you still want to style what iOS uses as phone numbers, you can do it the other way around. Let’s leave the OS add the special link for us (will not add the special meta that avoids this feature) and style how it looks. First you need to know how iOS links the numbers to the phone. Before:

1234567890

After:

<a hef="tel:1234567890" x-apple-data-detectors="true" x-apple-data-detectors-result="1">
1234567890</a>

As you can see iOS wraps the number into a link with special attributes. Now you can just style them using attribute selector:

a[x-apple-data-detectors=true] {color: inherit !important; background-color: inherit !important;}