Reputation: 187
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
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