html - 桌面友好的多个下拉列表，同时保持智能手机的默认样式

Question

我有一个基本的 HTML 下拉列表，基本上是这样的:

<select id="drpTest" name="drpTest" multiple="multiple">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
</select>

它做了它应该做的事情，但它对用户来说并不完全友好，因为你必须在按住控制键的同时按下才能选择多个选项。 然而，在像 Android 这样的智能手机上，它们像这样工作得很好 Link但显然带有复选框(这张图片显示的是普通下拉列表，不是多个，但它们基本相同)

但问题在于台式机。我试过使用各种插件等等，比如 http://wenzhixin.net.cn/p/multiple-select/#multiple-select

它们在台式机上运行良好，但在智能手机上它们不再使用默认的 Android 下拉列表，而是使用新的桌面下拉列表，但在智能手机上效果不佳。

是否有一种好的方法来设计多个下拉列表，使其对桌面更加友好，同时保持其“正常”，就像 Android 正常显示它一样？

Answer 1

Demo Fiddle

一个选择是使用 media queries为安卓/移动设备显示一个普通的选择框，然后为桌面机器显示一个替换的选择框

HTML

<select id='mobile'>
    <option>Mobile Select Box</option>
</select>
<select id='desktop'>
    <option>Desktop Select Box</option>
</select>

CSS

#mobile {
    display:none;
}
#desktop {
    display:block;
}
@media (max-width: 600px) {
    #desktop {
        display:none;
    }
    #mobile {
        display:block;
    }
}