I'm a big fan of keeping UI controls simple, preferably without the need for client-side javascript. Thankfully CSS has progressed (❤️ appearance: none;) to the point where we can style form controls well enough for most UX & brand guidelines.
Here's a technique with Emotion that uses an SVG background-image and CSS Custom Properties to style the Select's dropdown arrow. It's pretty simple and works client-side using CSS alone.
const makeGlyph = (colour: string, alpha = '100%') =>
encodeURIComponent(`<svg ...><path ... fill="hsla(${colour}, ${alpha})"/></svg>`);
export const Select = styled.select`
${({ theme }) => {
const enabledGlyph = makeGlyph(theme.colour.neutral);
const disabledGlyph = makeGlyph(theme.colour.neutral, '50%');
const activeGlyph = makeGlyph(theme.colour.primary);
const prefix = `data:image/svg+xml;charset=utf-8`;
return css`
--primary: url('${prefix},${enabledGlyph}');
--disabled: url('${prefix},${disabledGlyph}');
--active: url('${prefix},${activeGlyph}');
`;
}};
${otherSelectStyles}
--glyph: var(--primary);
appearance: none;
background: no-repeat right center / 1em;
&:not([multiple]):not([size]) {
background-image: var(--glyph);
transition: background-image 0.2s;
}
&:disabled {
--glyph: var(--disabled);
}
&:not(:disabled) {
&:hover,
&:focus {
--glyph: var(--active);
}
}
`;
Top comments (0)