在Android / iOS浏览器上呈现多个选择选项。

时间:2022-08-24 11:09:16

I would like to render multiple options underneath each other in the same way desktop browsers present such items

我希望以桌面浏览器呈现这些项的方式,在彼此的下面呈现多个选项

<select size="10" name="selectionList">
  <option value="5">Sparrow</option>
  <option value="18">Snowbunting</option>
  <option value="13">Purple-crowned Fairywren</option>
  <option value="19">Eagle</option>
  <option value="16">Hawk</option>
</select>

On any standard desktop web browser these items are rendered below one another with a potential scroll bar on the left hand side. However on both Android and iOS browsers only the selected item is rendered with the rest of the allocated space being wasted. When a selection is attempted, the options menu dialog is presented.

在任何标准的桌面web浏览器中,这些项都以一个潜在的滚动条在左边呈现在另一个下。然而,在Android和iOS浏览器上,只有选中的项被呈现,而分配的剩余空间被浪费。尝试选择时,将显示options菜单对话框。

Typically since I specify size="10" up to 10 items should be displayed at the same time. I can sort of understand the reason why they have opted to implement it they way they did, but I am hoping that there is a simple CSS trick to change the default behaviour.

通常,由于我指定size=“10”,所以应该同时显示10个项目。我能理解为什么他们选择用他们的方式实现它,但是我希望有一个简单的CSS技巧来改变默认行为。

How can I get the mobile device browser to render my select option the same way as desktop browsers without presenting the option menu dialog.

如何让移动设备浏览器以与桌面浏览器相同的方式呈现选择选项,而不显示选项菜单对话框。

2 个解决方案

#1


5  

Trying it now in Android 2.3.3 SDK - if you add border to css, e.g.: style="border: solid 1px #999999", it shows full size select box. But selected options is invisible for some reason. The browser is too buggy.

现在在Android 2.3.3 SDK中试用——如果你给css添加边框,例如:style="border: solid 1px # 99999999 ",它会显示全尺寸选择框。但是由于某些原因,选择的选项是不可见的。浏览器的问题太多了。

#2


0  

I don't think multiple select is the right tool for the job. I would much rather use multiple checkboxes instead. If the list is quite extensive you could also add a search input at the top that would filter the list on the fly.

我不认为多重选择是适合这项工作的工具。我宁愿使用多个复选框。如果列表非常广泛,您还可以在顶部添加一个搜索输入,这样就可以对列表进行过滤。

#1


5  

Trying it now in Android 2.3.3 SDK - if you add border to css, e.g.: style="border: solid 1px #999999", it shows full size select box. But selected options is invisible for some reason. The browser is too buggy.

现在在Android 2.3.3 SDK中试用——如果你给css添加边框,例如:style="border: solid 1px # 99999999 ",它会显示全尺寸选择框。但是由于某些原因,选择的选项是不可见的。浏览器的问题太多了。

#2


0  

I don't think multiple select is the right tool for the job. I would much rather use multiple checkboxes instead. If the list is quite extensive you could also add a search input at the top that would filter the list on the fly.

我不认为多重选择是适合这项工作的工具。我宁愿使用多个复选框。如果列表非常广泛,您还可以在顶部添加一个搜索输入,这样就可以对列表进行过滤。