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显示Android /移动设备的正常选择框，然后替换桌面计算机的选择框

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

桌面友好的多个下拉列表，同时保持智能手机的默认风格

1 个答案:

Demo Fiddle