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

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 2

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