Safari Mobile Multi-Line <Select> aka GWT Multi-Line ListBox

Question

Working on a webapp here that must run on the iPad (so, Safari Mobile).

I have this code that works fine in just about anything except iPad:

<select class="gwt-ListBox" size="12" multiple="multiple">
    <option value="Bleeding Eyelashes">Bleeding Eyelashes</option>
    <option value="Smelly Pupils">Smelly Pupils</option>
    <option value="Bushy Eyebrows">Bushy Eyebrows</option>
    <option value="Green Vessels">Green Vessels</option>
    <option value="Sucky Noses">Sucky Noses</option>
</select>

What it's supposed to look like is a box with 12 lines ans 5 of them filled up. It works fine in FF, IE, Chrome, Safari Win. But, when I open it on iPad, it's just a single line!

Styling it with CSS doesn't work. It just makes the single line bigger if I set the height. Is there a way to make it behave the same way as in normal browsers, or do I nave to make a custom component?

Thanks.

Answer 1

There is no way to do this. You have to implement your own component.

Source: http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/SafariWebContent.pdf (dead link)