[Solved] Font Color Not Changing on iPhone for Numbers?

[siouxfan45]

For whatever reason, the code below is changing the font color normally in web browsers but only for letters on my iPhone! Thus, “FREE CONSULTATIONS” shows up in white as it should and the phone number inherits its font color, completely ignoring the CSS class .underheader. If I change it to a word, it inherits the font color from .underheader correctly on iPhones. Completely confused by this. Any help?

.underheader { position:relative; text-align:center; font-weight:bold; color:#ffa500!important; display:none;  border-bottom:1px solid rgba(0,0,0,.2); width:100%; overflow:hidden; padding:.5em 0; font-size:2em; z-index:99999 }
.white { color:#FFF }

<div class="underheader">
(555) 555-5555
<div class="white">FREE CONSULTATIONS</div>
</div>

[basement31]

IOS is recognising that as a phone number and likely treating it as an anchor, I’d guess that styling .underheader a {} would work, if you didn’t want it to be a link you could always do something like <span>(555)</span> <span>555-</span>5555 which is more like the kind of thing you’d do in an html email where you pretend your back in 1995 :)

[atwulf]

iOS makes phone numbers clickable by defaults (for obvious reasons). Of course, that adds an extra tag which is overriding your styling if your phone number isn’t already a link.

To fix it, try adding this to your stylesheet: a[href^=tel] { color: inherit; text-decoration: none; }

That should keep your phone numbers styled as you expect without adding extra markup.

[Rune]

@atwulf Thank you!! This solved everything! At least on iOS. I hope it does the trick on Android as well :)

[designer-primo]

Thanks, Its working.

[milena]

@atwulf, This was very helpful. Thank you!
I had similar problem with a check-mark symbol & #10004;. Color change does not work for it on mobile devices. However, it works for other entities. Does anyone know why this is happening?

[sbpickering]

@atwulf Thanks very much, your solution worked like a charm!

[newmakar]

@atwulf And thanks from me too! Still causing problems in 2017. :)

[Author]

Posts