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.
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
}