Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Outlook mac forcing mailto link to show as blue #107

Open
M-J-Robbins opened this issue Jan 6, 2022 · 1 comment
Open

Outlook mac forcing mailto link to show as blue #107

M-J-Robbins opened this issue Jan 6, 2022 · 1 comment
Labels
Outlook Windows, macOS, iOS, Android and Outlook.com

Comments

@M-J-Robbins
Copy link
Contributor

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.
new outlook toggle button
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>
@M-J-Robbins
Copy link
Contributor Author

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>```

@hteumeuleu hteumeuleu added the Outlook Windows, macOS, iOS, Android and Outlook.com label Feb 16, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Outlook Windows, macOS, iOS, Android and Outlook.com
Projects
None yet
Development

No branches or pull requests

2 participants