<span> not taking color from style attr. or stylesheet on iPad

Question

I have a problem that is and has been perplexing me for hours. I have the following html:

<div id='numbers'><span>+44 (0)845 519 7811<br />+44 (0)118 947 4888</span></div>

I have applied the following CSS:

#numbers span {
    color:#CCC;
}

I've checked the inheritance and can't see any problems. This code displays fine on every browser I've tested it in other than Safari on the iPad and iPhone where the numbers are there (I can click on them and it asks me if I want to call), however the text is white! I've played, changed the DIV Id's to make sure I wasn't crossing styles, changed the span color to all sorts, nothing at all changes this.

Has anyone else had this problem?

(I am using a touchstart event with Jquery that shows and hides this DIV when an <a> is clicked on. I mention this as it may be causing the problem though I can't see how.)

Answer 1

You can add the following meta tag to the head of the HTML, but you will loose the ability to click the phone numbers:

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

alternatively try:

#numbers a {
    color:#CCC;
}

Answer 2

This question contains your answer.

The problem is that iOS will automatically turn anything that looks like a phone number into a link. You can disable that functionality with:

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

and then explicitly use the "tel" URI scheme, like this:

<a href="tel:+44 (0)845 519 7811">+44 (0)845 519 7811</a>

Answer 3

Rather than disabling the telephone data detection altogether, you can always target the phone number links and force your desired styling.

a[href^="tel:"] { 
    color: #CCC !important; 
    etc... 
}

This will override Monile Safari's default styling without adding all sorts of extra markup to the HTML.