桌面友好的多个下拉列表，同时保持智能手机的默认样式 [英] Desktop friendly multiple dropdownlist while keeping smartphones default style

问题描述

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

I have a basic HTML dropdownlist that's basically this:

<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这样的智能手机上，它们像链接一样可以很好地工作，但显然带有复选框(此图显示正常的下拉列表不是多个，但它们基本上是相同的)

It does what it should do, but it isn't exactly user friendly, since you have to hold down control while pressing to select several options. However on smarthphones like Android they work great like this Link but obviously with checkboxes(this image shows the normal dropdownlist not multiple but they're basically the same)

但是问题出在台式机上.我尝试使用各种插件，例如 http://wenzhixin.net.cn/p/multiple-select/#multiple-select

But the issue are the desktops. I've tried to use various plugins and so on like http://wenzhixin.net.cn/p/multiple-select/#multiple-select

它们在台式机上运行良好，但是在智能手机上，它们不再使用默认的Android下拉列表，而是使用了新的台式机，但不适用于智能手机.

And they work great on desktops, but on smartphones they no longer use the default Android dropdownlist, rather they use the new desktop one which doesn't work that great for smartphones.

是否存在一种设计多个下拉列表的好方法，以使其与桌面更加友好，同时保持其正常"状态(Android将其显示为正常状态)?

Is there a good way to design the multiple dropdownlist to make it more desktop friendly while keeping it "normal" in the way that Android will display it as normal?

推荐答案

演示小提琴

一种选择是使用媒体查询会在Android/移动设备上显示一个普通的选择框，然后在台式机上显示一个已替换的选择框

Demo Fiddle

One option would be to use media queries to show a normal select box for android/mobile devices, then a replaced select box for desktop machines

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

这篇关于桌面友好的多个下拉列表，同时保持智能手机的默认样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！