How to Remove the Blue Hyperlink Styling from Phone Numbers in iOS?

Removing Blue Number Styling in iOS: Comprehensive Guide

In the realm of mobile browsers, iPhone's Mobile Safari automatically applies a blue hyperlink style to telephone numbers. This can be an annoyance when numbers are displayed in the text, making them appear as clickable links. The question arises: how can this undesired styling be removed?

1. Disabling Auto-Formatting with the Format-Detection Meta Tag

To effectively prevent all auto-formatting, including the blue hyperlink styling, implement the following meta tag within the head element of your HTML document:

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

Bear in mind that if you have phone numbers on your page that should be clickable, you'll need to manually format them using the following code:

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

2. Controlling Styling with CSS

In cases where setting a meta tag is not feasible, CSS can be employed to override the default styling.

Option 1: Using an Attribute Selector

This CSS attribute selector targets links with href values beginning with "tel":

a[href^="tel"] {
  color: inherit;
  text-decoration: none;
  /* Additional CSS properties can be added here */
}

Option 2: Targeting Apple-Specific Data Attribute

When setting a meta tag is not an option, such as in HTML email templates, wrap phone numbers in anchor tags and target their styles using the following CSS:

a[x-apple-data-detectors] {
  color: inherit !important;
  text-decoration: none !important;
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

If you need to target specific links, utilize class attributes on your links and update the CSS selector accordingly.

The above is the detailed content of How to Remove the Blue Hyperlink Styling from Phone Numbers in iOS?. For more information, please follow other related articles on the PHP Chinese website!