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

by

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="https://stackoverflow.com/questions/3736807/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.

More Related Contents:

  1. How to replicate background-attachment fixed on iOS [duplicate]
  2. iPad Safari scrolling causes HTML elements to disappear and reappear with a delay
  3. Fixed background image with ios7
  4. background: fixed no repeat not working on mobile
  5. How do you disable viewport zooming on Mobile Safari?
  6. CSS background-size: cover replacement for Mobile Safari
  7. Turn off iPhone/Safari input element rounding
  8. iOS 11 Safari bootstrap modal text area outside of cursor
  9. Prevent ligatures in Safari (Mavericks/iOS7) via CSS
  10. How do I disable the resizable property of a textarea?
  11. How do you keep parents of floated elements from collapsing? [duplicate]
  12. Center image using text-align center?
  13. Why do browsers match CSS selectors from right to left?
  14. How to remove margin space around body or clear default css styles
  15. How do I change the color of radio buttons?
  16. Make a div fill the height of the remaining screen space
  17. How can I combine flexbox and vertical scroll in a full-height app?
  18. Is clearfix deprecated?
  19. CSS-Only Scrollable Table with fixed headers [duplicate]
  20. How to style SVG with external CSS?
  21. How to remove the gutter (spacing) between columns in Bootstrap?
  22. How to position two elements side by side using CSS
  23. How to make an HTML anchor tag (or link) look like a button?
  24. CSS only solution to set MULTIPLE “same height” row sections on a responsive grid
  25. Same height column bootstrap 3 row responsive
  26. How to change the style of a ‘s label?
  27. CSS custom cursor doesn’t work in FF/Chrome
  28. Flexbox with fixed header and footer and scrollable content
  29. How do I make a text input non-editable?
  30. Create wavy borders in CSS for top and bottom borders

Leave a Comment