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.)

Did you try setting the selector to just `span` or changing the style declaration (to change other properties on the span)? — Alexander Pavlov, Feb 14 '12 at 12:55

score 5 · Accepted Answer · answered Feb 14 '12 at 12:55

5

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;
}

answered Feb 14 '12 at 12:55

Ross

14,266
12
60
91

Thanks Ross, really helped me out. Top answer as I wanted to keep the click to call functionality and the editing of the is definitely better for me! Thanks. – David Barker Feb 14 '12 at 13:31

score 4 · Answer 2 · answered May 07 '14 at 16:25

4

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.

answered May 07 '14 at 16:25

mifi79

1,086
6
8

Great answer, love the ability to style the links while keeping their behavior. – Rob Gibbons May 07 '14 at 21:10

score 4 · Answer 3 · edited May 23 '17 at 11:58

4

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>

edited May 23 '17 at 11:58

Community

1
1

answered Feb 14 '12 at 12:56

CherryFlavourPez

7,529
5
45
47

Thanks Ed, +1 on your answer as it helped (along with above) – David Barker Feb 14 '12 at 13:32

not taking color from style attr. or stylesheet on iPad

3 Answers3