Representación de múltiples opciones de selección en el navegador Android / iOS

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.

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.

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.

preguntado el 08 de noviembre de 11 a las 18:11

2 Respuestas

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.

Respondido el 31 de diciembre de 11 a las 02:12

I don't think multiple select is the right tool for the job. I would much rather use múltiples casillas de verificación 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.

contestado el 10 de mayo de 12 a las 21:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.