How do I stop my long <select> dropdown list text from being shortened on iPhone?

How do I prevent my <select> option text from being shortened?

I’ve got the following HTML:

<select>
<option value="23007">Rolled (NOT FRAMED) (included)</option> 
<option value="23005">Gallery Wrap Stretched Canvas 1.5&quot; deep (add $63)</option> 
<option value="23006">Gallery Wrap Stretched Canvas 3/4&quot; deep (add $45)</option> 
<option value="23008">Silver Metal Frame (add $37)</option> 
<option value="23003">Premium Black Wood Frame - 1.6&quot; wide (add $60)</option> 
<option value="23004">Premium Black Wood Frame - 1.2&quot; wide (add $48)</option>
</select>

When I view it in Mobile Safari on iPhone, only start and end characters of each option are displayed — most of the m开发者_JAVA百科iddle characters are replaced with just ....

I'm pretty sure you can't. That's a native browser component. If you would prefer something else, you'd need to write your own UI component in javascript.

Form a UX perspective, I'd suggest that the better UI would be a radio button list:

http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/forms/forms-radiobuttons.html

I see your issue. I’ve got a reduced test case here:

• http://jsfiddle.net/GG8eU/3/

When I view tap on the <select> in iOS 4.3 on my iPhone, the text displayed in the iPhone’s selection popup is actually reduced in size so that it’s all viewable.

What version of iOS are you using?