Your guide to what's next.
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}>
                onChange={(event) => setValue(}
                <option value="one">One</option>
                <option value="two">Two</option>
            <div className={classes.visibleDropdown}>

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.

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?
Creating a JavaScript library with webpack
How to bundle a JavaScript library with webpack?
Line breaks in CSS
How to tune the browser's text wrapping algorithms?
CSS variables
Using CSS variables.