iPad Contact Link CSS Override

Question

I have a web page with a phone number being displayed in the page header. The font color for that section of the page is brown.

When the page is viewed on an iPad, the iPad (correctly) detects the text as a phone number and automagically converts the phone number text to a "contact link".

My problem is that I am unable to FORCE the link color to be brown - regardless of what I do in the CSS file (including "! important" after the color statement), the phone number is always being displayed in it's own self-appointed color!

Any clues on how to get my CSS declaration to win the war?

Answer 1

Try this, it worked for me (change the color code):

a.phone[href^=tel]:link { color:#9F6; }

Answer 2

It seems like ipad wraps the number in an <a>. I just added an additional rule for this:

Before: .phone { color:red; }

After: .phone, .phone a { color:red; }

Answer 3

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

Works for me. Check this for more detail.

http://developer.apple.com/library/safari/#featuredarticles/iPhoneURLScheme_Reference/Articles/PhoneLinks.html

Answer 4

(360) 687<i>-</i>8936 

I have a client who is a crazy person. He wants his phone number all over the website, and in only one place does it clash with the iphone/ipad auto-linking parser.

So, adding the i tag around the dash fooled iOS into seeing it not as a phone

Answer 5

Have a look on this page (format-detection) ;)