Why is the font color of a phone number blue on iOS?

Question

Does anyone know why the font color on iPad iOS 11.0, iPhone 7 iOS 11.0, iPhone X iOS 11.0.3 is blue? I tried to change the color in many ways but not working at all, I don't even have any blue color in my email code so it must be computed!

<table width="100%" border="0" cellpadding="0" cellspacing="0" align="right" style="background: #333d47; text-align: left; color: #FFFFFF;">
  <tr>
    <td style="font-family:Arial, sans-serif;font-size: 12px; color: #FFFFFF; margin:0; padding:20px; font-weight: 300 !important;">Contact us now: <span editable="true" style="color: #FFFFFF;">+1(555) 555-555</span>
    </td>
  </tr>
</table>

these agents detect phone number pattern and allow to call to it by clicking, you can try to set color of `A` tag — Iłya Bursov, Mar 30 '18 at 04:04
you mean wrap the phone with `` instead of span ? @IlyaBursov — Adam, Mar 30 '18 at 04:06
I do have a tag color set to white. I tried to change the color of everything wrapping this content but color wont change! — Adam, Mar 30 '18 at 04:12
`a { color: #FFFFFF; }` and `a { color: white;}` and I added `!important` — Adam, Mar 30 '18 at 04:14
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/167848/discussion-between-adam-and-ilya-bursov). — Adam, Mar 30 '18 at 04:14
Just a little search would have done it https://stackoverflow.com/questions/43303450/remove-blue-hyperlink-for-phone-number-in-email — Syfer, Mar 30 '18 at 12:21
Possible duplicate of [Remove blue hyperlink for phone number in email](https://stackoverflow.com/questions/43303450/remove-blue-hyperlink-for-phone-number-in-email) — Syfer, Mar 30 '18 at 12:22
@Syfer this is not anchor tag. read the question, and my answer at the bottom said this works with `` but not `` — Adam, Mar 30 '18 at 13:25
It's an alternative to use span so the underline and color change are not affected on visited ok different devices. As for the `a` not being an anchor I think the web itself disagrees with you https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a — Syfer, Mar 30 '18 at 21:14
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/167907/discussion-between-adam-and-syfer). — Adam, Mar 30 '18 at 23:01

score 3 · Answer 1 · answered Mar 31 '18 at 20:23

iOS gives us x-apple-data-detectors to work around Apple Mail meddling with auto-detecting phone numbers and addresses and making them links. Placing something like this in your <style> tag should do the trick:

*[x-apple-data-detectors] {
    border-bottom: 0 !important;
    cursor: default !important;
    color: inherit !important;
    text-decoration: none !important;
}

score 1 · Accepted Answer · answered Apr 01 '18 at 01:27

1

This CSS solved the problem in most clients

*[x-apple-data-detectors],  /* iOS */
    .x-gmail-data-detectors,    /* Gmail */
    .x-gmail-data-detectors *,
    .aBn {
        border-bottom: 0 !important;
        cursor: default !important;
        color: inherit !important;
        text-decoration: none !important;
        font-size: inherit !important;
        font-family: inherit !important;
        font-weight: inherit !important;
        line-height: inherit !important;
    }

answered Apr 01 '18 at 01:27

Adam

1,385
1
10
23

1

A+. The answer I gave above comes from the same place (https://github.com/TedGoas/Cerberus/) but pared down for just iOS (your question), but this answer covers Gmail too. – Ted Goas Apr 03 '18 at 12:06

score 0 · Answer 3 · answered Mar 30 '18 at 04:13

0

iOS renders strings that it interprets as phone numbers as clickable links by default.

Use the format-detection meta tag and you can disable this feature:

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

See: Supported Meta Tags

answered Mar 30 '18 at 04:13

ryanm

451
2
7

If putting that meta tag in the `` of your email didn't work, you could also try placing a ` – ryanm Mar 30 '18 at 04:23
but this is not an anchor tag! its `` – Adam Mar 30 '18 at 04:25

score 0 · Answer 4 · answered Mar 30 '18 at 04:47

You need to just define color in span tag like given below

 a { color: #FFFFFF !important; }
  span { color: #FFFFFF !important; }

<table width="100%" border="0" cellpadding="0" cellspacing="0" align="right" style="background: #333d47; text-align: left; color: #FFFFFF;">
  <tr>
    <td style="font-family:Arial, sans-serif;font-size: 12px; color: #FFFFFF; margin:0; padding:20px; font-weight: 300 !important;">Contact us now: <span editable="true" style="color: #FFFFFF;">+1(555) 555-555</span>
    </td>
  </tr>
</table>

score -1 · Answer 5 · answered Jul 06 '19 at 05:28

-1

Please try to add this to your site header

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

This happens as iOS detects phone numbers and turns them into links that people can click to call them. You can turn off the behavior by adding this in your section.

answered Jul 06 '19 at 05:28

subindas pm

2,668
25
18

adding this by itself won't solve the problem, but adding `*[x-apple-data-detectors], /* iOS */ .x-gmail-data-detectors, /* Gmail */ .x-gmail-data-detectors *, .aBn { border-bottom: 0 !important; cursor: default !important; color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; }` in the head will make it work. try it out – Adam Jul 09 '19 at 20:47

Why is the font color of a phone number blue on iOS?

5 Answers5