0

As the title states, iPhone keeps turning the phone numbers of my site to the color grey for some reason. I am using Drupal 7. I've read that the iPhone tries to make this numbers stand out so the reader knows they can interact with them. Now I've added the following to the head part of the document, to prevent that from happening:

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

But it does not work. I've made sure that CSS forces a white color, but nothing.

What can I do to keep iPhone from doing this?

Peter O.
  • 32,158
  • 14
  • 82
  • 96
Chayemor
  • 3,577
  • 4
  • 31
  • 54
  • 1
    possible duplicate of [remove styling of telephone numbers](http://stackoverflow.com/questions/3736807/remove-styling-of-telephone-numbers) – Shai Sep 21 '14 at 21:42
  • I've read that question and its answers, but they are not working. iPhone keeps styling it grey. – Chayemor Sep 21 '14 at 21:48

1 Answers1

0

In addition to the meta tag that your already using, for iOS devices, you should wrap telephone numbers, addresses, and dates in anchor tags and any styling you want to apply should be done on those anchor tags. If your working on a website you can style in your stylesheet. If your coding an email the style needs to be inline on the anchor tag like below..

<a href="tel:+18005552368" style="color:#333333;text-decoration:none;outline:none;">1-800-555-2368</a>

or

a[href^=tel]{
    color:#333333; // or whatever color you want
    text-decoration:none;
    outline:none;
}

If you don't want these to be clickable add pointer-events:none; and cursor:default; if you don't want the mouse pointer to act like they're clickable.

davidcondrey
  • 34,416
  • 17
  • 114
  • 136