多选在移动设备上选择<选择>框

Question

我有一个界面,它使用多选列表框和css设置高度来填充其他列表.

基本上:

<select multiple="multiple" size="5" style="height:150px;">
    <option value='1'>one</option>
    <option value='2'>two</option>
    <option value='3'>three</option>
    <option value='4'>four</option>    

</select>

<select multiple="multiple" style="height:150px;"></select>

使用jQuery,基本上你在第一个中选择一些东西,然后将它们移动到第二个.

这很好用,我们的用户喜欢它在非移动环境中.但是,在Android平板电脑,手机,iphone和ipads上,列表看起来是空的,直到你点击它显示内置的滚动选择界面.因此,当它们被添加到第二个列表时,您无法看到新的.

这个非常简单的jsFiddle用不显示其内容的选择框显示我正在谈论的内容:

http://jsfiddle.net/VhXwA/2/

有没有办法覆盖这种行为,而不必自己制作自定义的东西,或者使用完全不同的方式为移动设备执行此操作？

如果没有办法做到这一点,那么实现类似移动友好的东西的最佳方法是什么？

编辑:

以下是该界面外观的基本图片,两个框中的列表可能很长或很短.但为了保持一致,他们有一个设定的高度:

编辑:我无法想象我是唯一一个遇到这个的人!必须有一种方法可以使移动浏览器正常运行.

Answer 1

移动浏览器中的这种行为是为了改善用户体验而设计的。根据Safari 网页内容指南

使用选择元素 如果您在网页中使用选择 HTML 元素，iOS 会显示一个自定义选择控件，该控件针对使用手指作为输入设备选择列表中的项目进行了优化。在 iOS 上，用户可以轻拂以滚动列表，然后点击以从列表中选择一个项目。

话虽这么说：

• 我建议不要对抗它，而是为了移动用户而利用它

• select使用媒体查询为桌面和移动浏览器的元素应用不同的 CSS ；

• 如果显示的选项数量足够小，请考虑使用<input type="checkbox">

  而不是select因为它的行为在浏览器之间是一致的。