I made a simple font color and highlight color picker tool in HTML/CSS/JavaScript mimicking Outlook.

A coworker asked me for icons similar to the “font color” and “highlight color” buttons like this in Outlook:

Highlight color picker in Outlook

We use an icon font for our web apps like VSTS. Unlike these monocolor basic icons, the font color and highlight color icons need to be “multicolor” and “dynamic”. With icon font, multi-color icons are actually stacked font glyphs with different CSS styles. Then (a part of) the icon color changes to reflect user’s selection. I made a simple demo to show him how to do it in a web UI.

See the Pen Font Color Picker by Cherry Wang (@chryw) on CodePen.

What I learned

JavaScript can’t access pseudo elements because they’re not technically in DOM

To manipulate the text selection color, I have to toggle CSS classes, instead of directly changing the CSS attributes in JavaScript. This is because JavaScript can’t access ::selection pseudo class.

CSS-Tricks Q&A

It’s bad practice to use event.stopPropagation() to dismiss a popup

I wanted to dismiss the expanded swatch panel when clicking outside. Instead of event.stopPropagation(), I added a listener to document and let it explicitly detect clicks that are not supposed to open the swatch.

CSS-Tricks article