See also:

Styling native HTML dropdowns

How to style the native HTML dropdown?
Drop-down list

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.

Last updated on 12/2/2019 by Anton Vasetenkov.