with size attribute: iPhone renders blank Asked Feb 18 '13 at 13:13 Active Jul 12 '14 at 07:34 Viewed 1.4k times 16 0 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. iphone html css mobile mobile-safari edited Feb 18 '13 at 18:32 GlennG asked Feb 18 '13 at 13:13 GlennG 2,982 2 20 25 Instead of using `size="3"`, try using a CSS rule `select { width: 10px; }` – EM-Creations Feb 18 '13 at 13:16 1 You don't have any option like "", is it done for purpose ? – A-Live Feb 18 '13 at 13:33 Using the example code above, there is no PRE-selected car type. In order to do this, one would need to add "-- Select car type --" or similar to the HTML. In my application, you're selecting your home address from a list of addresses; I don't know which one to choose. – GlennG Feb 18 '13 at 14:42 Been working on a JSFiddle: http://jsfiddle.net/bqMEv/3/ It seems that the browsers render this quite differently, but the iPhone shows *nothing* in the second select where size=3 and there's no . Looks like I will need to resort to javascript to change the rendering specifically for the iPhone. – GlennG Feb 18 '13 at 15:48 Remove .css part for `select` to see what `size` attribute is used for. I'll attach Firefox screenshot of your work, please check it out and make a proper conclusion. – A-Live Feb 18 '13 at 18:19 I don't understand whats the matter; a) If you like the control to be labeled then add a text field above the select. You should do it anyway to tell the people what they have to choose; b) If you want an element to be pre-selected use the `selected` attribute; c) and you can even add an option called "-- Select Brand" and make that pre-selected with `size="1"` like any other website does. … what do you think should the iPhone display instead? A list like in a desktop browser on the phone isn't clickable anymore. – Feb 20 '13 at 23:26 1 The use case is you're presented with a list of addresses corresponding to your postcode. If it is a select size=1, you have to click on it to expose all the data. If it is a select size=10, then you can see the first 10 addresses. It's much less work on the part of the visitor AND fits with the "desktop" design. The reason this is an issue is that this works perfectly well with every other browser EXCEPT the iPhone/iPad, which represents 20% of visitors. – GlennG Feb 21 '13 at 09:19 1 Do not use w3schools for anything. It's bad. Very bad. – George Katsanos Feb 24 '13 at 00:17 4 Answers4 6 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 edited May 23 '17 at 11:45 Community 1 1 answered Feb 22 '13 at 22:18 Alexey Ivanov 8,128 2 26 27 Seems that iOS doesn't support normal HTML attributes of size > 1 or multiple selections. One has to resort to JavaScript as a workaround if the design calls for 'picker' style widgets. – GlennG Feb 24 '13 at 18:12

Answer 1

My simple fix for this, using Jquery:

$(document).ready(function(){
if(navigator.userAgent.match(/(iPhone|iPod|iPad)/i)) {
$('#my_select_box').prepend('<option value="" selected="selected" disabled="disabled">..Please select something</option>');
}
});

Works like this:

1. Wait for document to load

2. If user visits the site using an iPhone, iPod or iPad execute script

3. Add a selected and disabled option at the top of your select list, with the text "..Please select something".

Does nothing in all other browsers, works great :D

Answer 2

If you need to display one of the options, use the following: HTML selected Attribute

---

---

Your webpage at firefox:

Answer 3

It appears that people here might not be fully understanding the issue. The problem is that the iOS browser will not render the label for the unselectable first field, which would typically be a "Please select ..." type indicator. If it is not selected, iOS renders it as blank. This is not desirable, because there are choices for the user to make, but the field appears as blank.

You cannot also set it programatically selected to get the "Please select" to display, because if the field is required, the form validation no longer works, as the browser considers the first field as selected, even though it is flagged as unselectable.

The "Bug" is that iOS browser will not display the label for the first field, when it is set as unselectable.