Desktop friendly multiple dropdownlist while keeping smartphones default style

问题

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>

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)

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

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.

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?

回答1:

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

来源：https://stackoverflow.com/questions/23077889/desktop-friendly-multiple-dropdownlist-while-keeping-smartphones-default-style

标签

html

css

smartphone

dropdownbox