html - 是否有允许在桌面上使用自定义样式选项但在移动设备上具有 native 行为的 Dropdown 组件？

Question

我可以使用哪个组件来获得 <select>具有自定义样式的下拉菜单 <option>桌面上的元素，但能够在移动设备上保持原生行为？

据我所见，<option>元素的样式有限(只有 background-color 、 font-size 和 color 似乎有效)。

我尝试过一些样式化的下拉菜单，比如 bootstrap-select , react-select或 react-styled-select替换 <option>带有 <div> 的元素或 <span>为了让它更容易设置样式，但这适用于所有分辨率，因此无法在移动设备上具有 native 行为。

Answer 1

是的，看起来至少有一个这样的下拉菜单: https://www.npmjs.com/package/styleselect

这是一个普通的 JS 组件，取代了原生的 <select><option>带有 <div> 的标签s 在桌面上，并使用此条件将它们保留在移动设备上:

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