Remove Microsoft Edge's phone number styling

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?

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.

If you don't want to disable for an entire page as the selected answer suggests, you can add the following attribute to a specific tag

<p x-ms-format-detection="none">

Reference: https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/dev-guides/dn265018(v=vs.85)#controlling-phone-number-detection

The above answer works perfectly, but disables the ability to have click to call phone numbers (which is a major problem if you are building a responsive site). I have found a better work around to be make the phone number a link. Example:

<a href="tel:888-888-8888">(888) 888-8888</a>

This would then allow you to style the "link" however you want, and the "a" styles in your CSS override the Edge and iPhone styles on the phone number. The only issue with this is it makes the phone number a link for all devices, but I have found this not to be an issue as almost every device has some sort of click to call feature or app included.

I've faced this issue, but with a slightly different use case: The number it's highlighting is not a phone number, so I don't want any special formatting.

For example you might have something like:

<div>The current date/time: May 08 2017 10:44:58 GMT Daylight Time</div>

For me*, Edge will convert 08 2017 10 into a phone number link. Thanks, Edge!

I've found that you can get around this by inserting invisible inline-block element into the middle of the string:

.notel{
  display:inline-block;
  height:0px;
  width:0px;
}

<span class="phone">(763)219-5222</span>
<div>The current date/time: May 08 2017 10:44:58 GMT Daylight Time</div>

<br>
<span class="phone">(763)2<span class="notel"></span>19-5222</span>
<div>The current date/time: May 08 2<span class="notel"></span>017 10:44:58 GMT Daylight Time</div>

I can't see if this works for your phone number as I don't see highlighting in either case. You might need to nudge the positioning of the span.

Incidentally, the fact that you can do this is one of the many reasons you shouldn't copy commands off webpages and into your terminal:

span{
display:inline-block;
height: 0px;
width: 0px;
overflow:hidden;
}
textarea{
  width: 300px;
  height:50px;
}

<div>echo "HELLO" <span>&& wreck this machine</span></div><div>echo "WORLD"</div>

<textarea ></textarea>
<div>
Select, copy and paste above commands into the textarea.
</div>

*I think Edge's highlighting of numbers is regional. Your jsfiddle isn't highlighted for me, but I'm in the UK. Here is seems to highlight numbers that begin with 0.