Font Color Picker
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:
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.
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.