<select> with size attribute: iPhone renders blank

Question

When rendering a select dropdown as below, the iPhone renders it blank. How can I fix this?

<select size="3">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

The above example from http://www.w3schools.com/tags/att_select_size.asp. Their sample is http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select_size

In Firefox (and all other browsers), it renders as:

However, on an iPhone, it's rendered blank. This is very bad for usability as the visitor doesn't know what's in the box (in our application, it's for selecting their address from several possibilities).

I've created a JSFiddle: http://jsfiddle.net/bqMEv/3/ The iPhone rendering is as follows; note that there's nothing shown when both:

• size is greater than 1
• and height is specified in CSS
• and no option is selected

Removing the CSS height shows that the iPhone ignores the size attribute.

Answer 1

Looks like there is no standard way to do it, based on content of other topics on stack overflow:

• Safari Mobile Multi-Line <Select> aka GWT Multi-Line ListBox
• jquery plugin to convert a <select size="10"> to a usable list on Safari mobile (iOS)

But author of the second topic wrote a plugin that emulates that behavior: https://github.com/redhotsly/safarimobile-multiline-select