Remove Microsoft Edge's phone number styling

How to style your numbers and maintain UX

Custom CSS styling

To rid your web page of Microsoft Edge's default phone number stylings, use custom CSS like so:

a[href^="tel"] {
    color: inherit; // For when you want to blend in with the crowd
    text-decoration: none; // Because who needs underlines?
    pointer-events: none; // Make it unclickable, just like your heart
}


Maintain click to call functionality

For those attached to the click to call functionality, you can maintain it with this CSS rule:

a[href^="tel"] {
    cursor: pointer; // It's a trap!
    pointer-events: auto; // But it's a trap you want to fall into...
}


Sneaky HTML trick

A clever HTML trick can also solve your problem. By using zero-width spaces, you can keep Edge from recognizing numbers as phone links:

123​456​7890 // Edge, here are some numbers for you, find the phone numbers! 😈


Problems you might run into and how to solve them

Potential problems with JavaScript

Using JavaScript to dynamically modify rendered content can become necessary when tackling complex scenarios. This approach, however, can have an impact on page load times, thus affecting user experience.

Being mindful of user experience

Fully disabling the automatic phone styling can prevent the users from initiating calls directly from your site. Always balance the design choices with the needs of your users.

Watch out for copied code

In your quest to rid your site of default stylings, you might be tempted to copy and paste code snippets from an array of sources. Beware though, as this can lead to unexpected behavior.