EckherInsightsToolsContact
Eckher
Your guide to what's next.
Eckher
English
Home › Eckher Insights › Styling native HTML dropdowns
Dec 2, 2019

Styling native HTML dropdowns

How to style the native HTML dropdown?

The best way to implement an accessible dropdown in HTML is to use the native <select> element.

This is an example of how to style the native <select> element using JSS:

const useStyles = createUseStyles({
    wrapper: {
        position: 'relative'
    },
    invisibleNativeSelect: {
        position: 'absolute',
        top: 0,
        right: 0,
        bottom: 0,
        left: 0,
    
        width: '100%',
        height: '100%',
    
        opacity: 0
    },
    visibleDropdown: {
        // Styles for the collapsed dropdown
        fontFamily: 'cursive',
    
        // Styles for the focused collapsed dropdown
        '$invisibleNativeSelect:focus + &': {
            outline: 2
        }
    }
})

const Dropdown = () => {
    const classes = useStyles()
    const [value, setValue] = useState(options[0].value)

    return (
        <div className={classes.wrapper}>
            <select
                className={classes.invisibleNativeSelect}
                value={value}
                onChange={(event) => setValue(event.target.value)}
            >
                <option value="one">One</option>
                <option value="two">Two</option>
            </select>
            <div className={classes.visibleDropdown}>
                {value}
            </div>
        </div>
    )
}

In the example above, an invisible native <select> element is stretched on top of the visible <div> that renders the currently selected value and can be styled to look like a collapsed dropdown.

Cover
See also
Emoji SVG sources
SVG sources of Google and Twitter emojis.
Markup for multilingual websites
The correct markup for website localization and internationalization.
Multi-<select> in React
How to implement a controlled multi-<select> in React?
<select> in React
How to implement a controlled <select> in React?
Iterating over Map in JavaScript
Gotchas with iterating over a Map object in JavaScript.
Creating a JavaScript library with webpack
How to bundle a JavaScript library with webpack?
Flow-relative padding and margin
Why is padding-inline-start better than padding-left?
Line breaks in CSS
How to tune the browser's text wrapping algorithms?
CSS variables
Using CSS variables.
Eckher
Your guide to what's next.
Copyright © 2021 Eckher. Various trademarks held by their respective owners.