Providing multiple selection options in an Android / iOS browser

Question

I would like to display several options under each other, just like in desktop browsers.

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

In any standard desktop web browser, these elements are displayed below each other with a potential scroll bar on the left side. However, on Android and iOS browsers, only the selected item is selected, and the rest of the selected space is lost. When you try to select, the options menu dialog is displayed.

Usually, since I specify size = "10", up to 10 elements should be displayed at a time. I can understand why they decided to implement it the way they did, but I hope there is a simple CSS trick to change the default behavior.

How can I get the mobile browser to display my selection in the same way as desktop browsers without presenting the options menu dialog.

Answer 1

Try it now in the Android 2.3.3 SDK - if you add a border to css, for example: style = "border: solid 1px # 999999", it shows a size selection window. But for some reason, the selected options are invisible. The browser is too buggy.

Answer 2

I do not think that multiple choice is the right tool for the job. Instead, I'd rather use a few checkboxes. If the list is extensive enough, you can also add a search entry at the top that will filter the list on the fly.