I have an HTML that contains a simple paragraph with a phone number, but on my tests in iOS that phone number changes its color and is converted to a phone. The conversion to phone doesn't bother me, but the font color change is. How can avoid that?
this is an example of my code:
<p class="phone-pink">call 1-888-4HELP <br class="show-for-small-only">(1-888-443-57)</p>
Add this to the head of your html:
<meta name="format-detection" content="telephone=no">
As mentioned above you can can style the link tag but if you only want to affect that one line do this:
.phone-pink a[href^=tel] {
color : inherit;
text-decoration: none;
}
and then you could change that to an id:
<p id="phone-pink">call 1-888-4HELP <br class="show-for-small-only">(1-888-443-57)</p>
and the css:
#phone-pink a[href^=tel] {
color : inherit;
text-decoration: none;
}
Check out these answers for more info:
How do I remove the blue styling of telephone numbers on iPhone/iOS?
From Atwulf on https://css-tricks.com/forums/topic/font-color-not-changing-on-iphone-for-numbers/
"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."
For future reference, please try googling your question online first and seeing if there is already an answer. And if not, then asking a question here.
