remove styling of telephone numbers

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?

Have this rendering issue on some of my websites but can't see why this is occurring.

Answer 1

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.

Answer 2

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.

If you have phone numbers on the page with these numbers you should manually format them as links:

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