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)