email-bugs
email-bugs copied to clipboard
Outlook mac forcing mailto link to show as blue
Outlook on Mac is forcing :mailto
link to have blue text by adding the inline style color: rgb(0, 120, 212) !important;
This is happening only in the "New Outlook" which is turned on at the top right corner of the app.
I'm using Outlook V16.56 on iOS 11.6.2
This is enough code to reproduce the issue
<a href="https://example.com" style="color:green;">web link</a>
<a href="mailto:[email protected]" style="color:green;">mailto link</a>
which Outlook renders as
<a href="https://example.com" contenteditable="false" title="https://example.com/" style="font-family: Calibri; font-size: 14px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: green;">web link</a><span style="caret-color: rgb(0, 0, 0); color: rgb(0, 0, 0); font-family: Calibri; font-size: 14px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; display: inline !important; float: none;"><span class="Apple-converted-space"> </span></span><a href="mailto:[email protected]" contenteditable="false" title="mailto:[email protected]" style="font-family: Calibri; font-size: 14px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: rgb(0, 120, 212) !important;">mailto link</a>
This was initially reported in EmailGeeks Slack by Brandon Bento who also pointed out this work around
from a quick test, a solution can be wrapping it with a span:
<a href="mailto:[email protected]" style="color:green;">
<span style="color:green;">mailto link</span>
</a>```