Jump to content

How To Remove Blue Styling Of Telephone Numbers On IPhone IOS


Nathan
 Share

Recommended Posts

  • Administrators

68747470733a2f2f73332d75732d776573742d32

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

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...