If you’re designing for mobile Safari and notice your phone numbers mysteriously turning blue and underlined, you’re not alone. By default, Safari automatically detects phone numbers and converts them into clickable links—often overriding your CSS styles in the process.
The Problem
Safari’s automatic phone number detection is helpful in some cases, but for designers and developers, it can break the intended layout or brand consistency—especially when you’re working with custom fonts or color schemes.
The Simple Fix
The good news is that you can disable this behavior with just one line of code in your <head> tag:
<meta name="format-detection" content="telephone=no">
This tells Safari not to automatically detect and format telephone numbers, allowing you full control over how numbers appear on your site.
Pro Tip
If you still want numbers to be clickable but styled your way, you can manually wrap them in <a href=”tel:1234567890″> tags and apply your own CSS:
(123) 456-7890
Then style it however you like:
.phone {
color: inherit;
text-decoration: none;
font-weight: 600;
}
Final Thoughts
Safari’s auto-detection can be helpful for users, but problematic for designers. With a simple meta tag or some controlled styling, you can prevent unwanted design changes and keep your UI consistent across all browsers.
For more quick dev tips like this, check back at blog.identitydesign.us