Remove Microsoft Edge's phone number styling

html css microsoft-edge
karns picture karns · Aug 13, 2015 · Viewed 69.5k times · Source

I noticed that the new Microsoft Edge browser overrides my styles when it detects phone numbers:

<span class="phone">(123)123-1234</span>

See this jsfiddle (must be opened using Microsoft Edge :P).

This sort of intrudes upon the design of the website, and is rather obnoxious. Sure seems like a trait of a successor to IE :/

How can I override or disable this so my website users will not see it?

Answer

scunliffe picture scunliffe · Aug 13, 2015

You can get rid of it by adding this meta tag in the header of your pages.

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

Microsoft's documentation on this tag.

Hopefully there will be a better way to turn this off globally without bloating pages... Or better yet disable this feature by default.

Related questions

How to make clip-path work on Microsoft Edge?

While making a clipped header for Firefox and Microsoft Edge(ME), I used clip-path. It works in Firefox just by putting clipPath element inside an SVG element and a clip-path style inside the HTML element. When I open this same …

Read More
On Edge Browser, how to change input placeholder text color using CSS?

On Edge Browser, I couldn't able to change input placeholder color. :-ms-input-placeholder is not working but works fine on IE 10 & IE 11. input:-ms-input-placeholder { font-style:italic; color: red; background-color: yellow; } is there anyway to make it work using CSS?

Read More
CSS word-break does not work correctly in Microsoft edge

It has come to my attention that in Microsoft Edge there is a problem with some css attributes, such as : word-break: break-word; Is there a way of fixing this or is there a way around this?

Read More