I need to display multiple options listed one below the other, similar to how desktop browsers show them.
<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 standard desktop web browsers, these items are neatly displayed in a list with the option to scroll. However, when viewed on Android and iOS browsers, only the selected item is shown, leaving wasted space. When an attempt is made to select something, an options menu dialog appears.
Although I have specified size="10", mobile browsers do not display up to 10 items at a time. While I understand the reason behind this implementation, I am looking for a simple CSS solution to change this default behavior.
Is there a way to make mobile browsers render my select options like desktop ones, without triggering the options menu dialog?