How To Remove Blue Styling Of Telephone Numbers On IPhone IOS

[Nathan]

When linking a telephone number on your website using the a href tag you will notice inconstant styles from mobile devices.  For example on a desktop or laptop the number will appear styled as expected when using this code.

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

Then you take a look from your mobile device and they show a blue style color.  The CSS seems to have been overwritten somehow.  The mobile phone browser is adding it’s own style.  To remove it across the board you can set the format-detection meta tag in the header of your web page.

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

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

If setting the meta tag isn’t an option you can always use some advanced CSS code.  Here we’ll target the style value of the link/anchor tags.

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 a class so not all phone numbers are effected you can do so like this.

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

Lastly you can also target all a href elements that start with “tel” like this.

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