How do I remove the blue styling of telephone numbers on iPhone/iOS?

Seize control of your phone links

If you want an iron grip on your phone links' styling, formulate them manually, carving out complete control:

<a href="tel:+1-555-555-5555">1-555-555-5555</a>


This beauty allows you to craft your phone links like any other links. Mold them with CSS:

a[href^="tel"] {
    color: #000; /* Black like my coffee ☕ */
    text-decoration: none;
}


Remember, though, to send your changes on a world tour of devices to make sure that everywhere, it remains the star.

Style wizardry in email templates

In the magical realm of HTML email templates, iOS shows off and applies its own styles to phone numbers. Undo that with a mighty wand wave of x-apple-data-detectors:

a[x-apple-data-detectors] {
    color: inherit !important; /* That's right, stay in line */
    text-decoration: none !important;
    font-size: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
}


Be aware, however, that each email client is a different beast, and rigorous testing is advised.

Custom class shields

CSS global wars can be scary. For the sake of safety and sanity, forge shields from your own classes:

<a href="tel:+1-555-555-5555" class="custom-phone-link">Dial away!</a>


.custom-phone-link {
    /*
     Customize as you please. Be bold, be creative.
     This is your castle, you are the king!👑
    */
}


This method keeps your styles as a well-organized army, ready for any challenge.

The profundity of meta tags

Dive deeper into the ocean of control with Apple-specific meta tags. There lie treasures untold:

Apple Meta Tags Deep Dive

These keys, combined with your HTML skills, can enhance the user experience on Apple devices dramatically.

On point semantics

When you're in the house of code, the <code> tag is your best attire. Neatly packs your code snippets:

<code>
    a[href^="tel"] { color:inherit; text-decoration:none; }
</code>


It's not just about style, though. Using semantic HTML is about accessibility and adhering to code standards as well.

Testing mantra

Every time you play with styles, remember the mantra of testing:

• Taking a tour of iOS versions for compatibility
• Visiting different email clients
• Checking the accessibility boxes

Use format-detection... or not?

Sometimes, altering format detection might have the side effect of making links disappear. So, be careful! If your layout counts on users recognizing clickable phone numbers, it might be safer to stick to CSS for styling, and keep the meta tag as a last resort.