Html 如何删除 iPhone/iOS 上电话号码的蓝色样式？

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

提问by Reno

Is there a way to remove the default blue hyperlink colour from a telephone number when viewed on an iPhone? Like a specific Mobile Safari tag or CSS to add?

在 iPhone 上查看时，有没有办法从电话号码中删除默认的蓝色超链接颜色？想要添加特定的 Mobile Safari 标签或 CSS？

I only have this in place for the number:

我只有这个号码：

<p id="phone-text">Call us on <strong>[phone]</strong></p>

And there are no hyperlinks but iPhone still renders this text number as a hyperlink. I have this rendering issue on some of my websites but can't see why this is occurring.

并且没有超链接，但 iPhone 仍然将此文本编号呈现为超链接。我在我的一些网站上有这个渲染问题，但不明白为什么会发生这种情况。

I did read this post:

我确实读过这篇文章：

Mobile HTML rendering numbers

移动 HTML 呈现数量

But is that the only solution possible?

但这是唯一可能的解决方案吗？

回答by Beau Smith

Two options…

两种选择……

1. Set the format-detectionmeta tag.

1.设置format-detection元标签。

To remove all auto-formatting for telephone numbers, add this to the headof your htmldocument:

要删除电话号码的所有自动格式，请将其添加到head您的html文档中：

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

View more Apple-Specific Meta Tag Keys.

查看更多Apple 特定的元标记键。

Note:If you have phone numbers on the page with these numbers you should manually format them as links:

<a href="tel:[phone]">1-555-555-5555</a>

注意：如果页面上的电话号码包含这些号码，您应该手动将它们格式化为链接：

<a href="tel:[phone]">1-555-555-5555</a>

---

---

2. Can't set a meta tag? Want to use css?

2. 不能设置meta标签？想用css吗？

Two cssoptions:

两种css选择：

---

---

Option 1 (better for web pages)

选项 1（更适合网页）

Target links with hrefvalues starting with telby using this css attribute selector:

使用此 css 属性选择器以href值开头的目标链接tel：

a[href^="tel"] {
  color: inherit; /* Inherit text color of parent element. */
  text-decoration: none; /* Remove underline. */
  /* Additional css `propery: value;` pairs here */
}

---

---

Option 2 (better for html email templates)

选项 2（更适合 html 电子邮件模板）

Alternatively, you can when you can't set a meta tag—such as in html email—wrap phone numbers in link/anchor tags (<a href=""></a>) and then target their styles using css similar to the following and adjust the specific properties you need to reset:

或者，当您无法设置元标记时（例如在 html 电子邮件中），您可以将电话号码包装在链接/锚标记 ( <a href=""></a>) 中，然后使用类似于以下内容的 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 want to target specific links, use classes on your links and then update the css selector above to a[x-apple-data-detectors].class-name.

如果要定位特定链接，请在链接上使用类，然后将上面的 css 选择器更新为a[x-apple-data-detectors].class-name.

回答by Silverback

Just to elaborate on an earlier suggestion by David Thomas:

只是详细说明 David Thomas 早先的建议：

a[href^="tel"]{
    color:inherit;
    text-decoration:none;
}

Adding this to your css leaves the functionality of the phone number but strips the underline and matches the color you were using originally.

将此添加到您的 css 会保留电话号码的功能，但会去除下划线并匹配您最初使用的颜色。

Strange that I can post my own answer but I can't respond to someone else's..

奇怪的是，我可以发布自己的答案，但我无法回复别人的..

回答by David says reinstate Monica

If you want to retain the functionof the phone-number, but just remove the underline for display purposes, you can style the link as any other:

如果您想保留电话号码的功能，但为了显示目的而删除下划线，您可以将链接设置为任何其他样式：

a:link {text-decoration: none; /* or: underline | line-through | overline | blink (don't use blink. Ever. Please.) */ }

I haven't seen documentation that suggest a class is applied to the phone number links, so you'll have to add classes/ids to links you wantto have a different style.

我还没有看到建议将类应用于电话号码链接的文档，因此您必须将类/ID 添加到要具有不同样式的链接。

Alternatively you can style the link using:

或者，您可以使用以下方式设置链接样式：

a[href^=tel] { /* css */ }

Which is understood by iPhone, and won't be applied (so far as I know, perhaps Android, Blackberry, etc. users/devs can comment) by any other UA.

iPhone 可以理解，并且不会被任何其他 UA 应用（据我所知，也许 Android、Blackberry 等用户/开发人员可以发表评论）。

回答by sammi

In case people find this question on Google, all you need to do is treat the telephone number as a link as Apple will automatically set it as one.

如果人们在 Google 上发现这个问题，您只需将电话号码视为链接，因为 Apple 会自动将其设置为一个链接。

your HTML

你的 HTML

<p id="phone-text">Call us on <strong>[phone]</strong></p>

your css

你的CSS

#phone-text a{color:#fff; text-decoration:none;}

回答by Valross.nu

Since we use tel: links on a site with a phone-icon on :before most solutions posted here introduces another problem.

由于我们在网站上使用电话图标的 tel: 链接：在此处发布的大多数解决方案引入了另一个问题之前。

I used the meta-tag:

我使用了元标记：

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

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

This combined with specifying tel: linkssite-wide where it should be linked!

这与指定tel: links站点范围内应该链接的位置相结合！

Using css is really not an option as it hides relevant tel-links.

使用 css 真的不是一种选择，因为它隐藏了相关的电话链接。

回答by Arkadas Kilic

Simple trick worked for me, adding a hidden object in the middle of phone number.

简单的技巧对我有用，在电话号码中间添加一个隐藏对象。

<span style="color: #fff;">
0800<i style="display:none;">-</i> 9996369</span>

This will help you to override phone number color for IOS.

这将帮助您覆盖 IOS 的电话号码颜色。

回答by Marko

An old question but as none of the above answers were good for me i post how i resolved it

一个老问题，但由于上述答案都不适合我，我发布了我如何解决它

I have a phone number in a list:

我在列表中有一个电话号码：

<li class="phone_menu">[phone]</li>

css:

css：

.phone_menu{
  color:orange;
}

But on iPad/iPhone it was black, so i just added this to the css:

但是在 iPad/iPhone 上它是黑色的，所以我只是将它添加到 css 中：

.phone_menu a{
  color:orange;
}

回答by Ross

a[href^=tel]{
    color:inherit;
    text-decoration: inherit;
    font-size:inherit;
    font-style:inherit;
    font-weight:inherit;

回答by SequenceDigitale.com

According to Beau Smith from this subject: How do I remove the blue styling of telephone numbers on iPhone/iOS?

根据本主题的 Beau Smith 的说法： 如何删除 iPhone/iOS 上电话号码的蓝色样式？

You should apply "tel:" in the href attribute of your link like this:

您应该像这样在链接的 href 属性中应用“tel：”：

<a href="tel:[phone]">555 123-1234</a>

It will remove any additionnal style and DOM to the phone number string.

它将删除电话号码字符串的任何附加样式和 DOM。

回答by Bryana

I've been going back and forth between

我一直在这之间来回走动

1.

1.

    <a href="tel:[phone]">

2.

2.

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

Trying to make the same code work for desktop and iPhone. The problem was that if the first option is used and you click it from a desktop browser it gives an error message, and if the second one is used it disables the tab-to-call functionality on iPhone iOS5.

试图使相同的代码适用于桌面和 iPhone。问题是，如果使用第一个选项并从桌面浏览器单击它，则会显示错误消息，如果使用第二个选项，则会禁用 iPhone iOS5 上的选项卡呼叫功能。

So I tried and tried and it turned out that iPhone treats the phone number as a special type of link that can be formatted with CSS as one. I wrapped the number in an address tag (it would work with any other HTML tag, just try avoiding <a>tag) and styled it in CSS as

所以我试了又试，结果发现 iPhone 将电话号码视为一种特殊类型的链接，可以用 CSS 格式化为一个链接。我将数字包装在地址标签中（它可以与任何其他 HTML 标签一起使用，只需尝试避免使用<a>标签）并在 CSS 中将其样式设置为

.myDiv address a {color:#FFF; font-style: normal; text-decoration:none;}

and it worked - in a desktop browser showed a plain text and in a Safari mobile showed as a link with the Call/Cancel window popping up on tab and without the default blue color and underlining.

它有效 - 在桌面浏览器中显示纯文本，在 Safari 移动设备中显示为链接，在选项卡上弹出呼叫/取消窗口，没有默认的蓝色和下划线。

Just be careful with the css rules applied to the number especially when using padding/margin.

请注意应用于数字的 css 规则，尤其是在使用填充/边距时。