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    lt p id  phone-text  gt Call us on  lt strong gt  44  0 20 7194 8000 lt  strong gt  lt  p gt    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

User · Answer

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    lt meta name  format-detection  content  telephone no  gt    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    lt a href  tel  1-555-555-5555  gt 1-555-555-5555 lt  a gt       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   lt a href    gt  lt  a gt   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

User · Answer

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    lt meta name  format-detection  content  telephone no  gt   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

User · Answer

a href  tel       color inherit      text-decoration  inherit      font-size inherit      font-style inherit      font-weight inherit

User · Answer

No need to remove format detection by using  lt meta name  format-detection  content  telephone no  gt   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

User · Answer

In Joomla Yootheme works for me   a not  class         color   fff  important

User · Answer

Simple trick worked for me  adding a hidden object in the middle of phone number    lt span style  color   fff   gt  0800 lt i style  display none   gt - lt  i gt  9996369 lt  span gt    This will help you to override phone number color for IOS

User · Answer

Putting the number in a  lt fieldset gt  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

User · Answer

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

User · Answer

This x-ms-format-detection  none  attribute handle the format phone   https   msdn microsoft com en-us library dn337007 v vs 85  aspx   lt p id  phone-text  x-ms-format-detection  none    gt Call us on  lt strong gt  44  0 20 7194 8000 lt  strong gt  lt  p gt

User · Answer

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   lt p id  phone-text  gt Call us on  lt strong gt  44  0 20 7194 8000 lt  strong gt  lt  p gt    your css   phone-text a color  fff  text-decoration none

User · Answer

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

User · Answer

lt meta name  format-detection  content  telephone no  gt    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  lt a href  tel 18001234567  gt 1-800-123-4567 lt  a gt    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    lt a href  tel  1 1 2 3  gt   1   2- 3 lt  a gt        or even better without jQuery  document body innerHTML   document body innerHTML replace    D   d 3   D  D   d 3   D   d 4   g   lt a href  tel  1 1 2 3  gt   1   2- 3 lt  a gt

User · Answer

If you don t intend to have any telephone numbers on your page  then      lt meta name  format-detection  content  telephone no  gt  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    lt  php echo number format  row  population      gt   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  lt a href  tel 18001234567  gt 1-800-123-4567 lt  a gt  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

User · Answer

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

User · Answer

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    lt a href  tel 5551231234  gt 555 123-1234 lt  a gt    It will remove any additionnal style and DOM to the phone number string

User · Answer

I   ve been going back and forth between   1        lt a href  tel 5551231234  gt    2        lt meta name  format-detection  content  telephone no  gt    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  lt a gt  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

User · Answer

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    lt li class  phone menu  gt  555 5 555 55 55 lt  li gt    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

User · Answer

This did it for me    appleLinks a  color  000000    appleLinksWhite a  color  ffffff     You can find more info here

User · Answer

Try using putting the ASCII character for the dash in between the digit separations   from this  -  to this   amp ndash   ex  change 555-555-5555    555 amp ndash 555 amp ndash 5555

User · Answer

If you simply want to avoid phone numbers being links at all try using the font tag    lt p gt 800 lt font gt - lt  font gt 555 lt font gt - lt font gt 1212 lt  p gt

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

1. Set the `format-detection` meta tag.

2. Can’t set a meta tag? Want to use `css`?

Option 1 (better for web pages)

Option 2 (better for html email templates)

Examples related to html

Examples related to ios

Examples related to css

Examples related to mobile-safari