Andrei
Andrei

Reputation: 187

Is there a Dropdown component which allows for a custom styled options on desktop, but native behavior on mobile?

Which component could I use in order to have a <select> dropdown with custom styled <option> elements on desktop, but be able to maintain the native behavior on mobile?

From what I'm seeing, the <option> element has limited styling (only background-color, font-size and color seem to be working).

Some styled dropdowns I've tried, like bootstrap-select, react-select or react-styled-select replace the <option> element with <div> or <span> in order to style it easier, but this across all resolutions, thus not being able to have the native behavior on mobile.

Upvotes: 1

Views: 697

Answers (1)

Andrei
Andrei

Reputation: 187

Yes, it looks like there is at least one such dropdown: https://www.npmjs.com/package/styleselect

It's a vanilla JS component which replaces the native <select><option> tags with <div>s on desktop, and leaves them native on mobile using this condition:

// Use native selects (which pop up large native UIs to go through the options ) on iOS/Android
if ( navigator.userAgent.match( /iPad|iPhone|Android/i ) ) {
    return
}

Upvotes: 1

Related Questions