<select> with size属性：iPhone呈现空白</select>

Question

如下所示呈现选择下拉列表时，iPhone将其呈现为空白。我该如何解决这个问题？

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

以上http://www.w3schools.com/tags/att_select_size.asp的例子。他们的样本是http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select_size

在Firefox（和所有其他浏览器）中，它呈现为：

然而，在iPhone上，它呈现为空白。这对于可用性非常糟糕，因为访问者不知道框中的内容（在我们的应用程序中，它是从多种可能性中选择地址）。

我创建了一个JSFiddle：http://jsfiddle.net/bqMEv/3/ iPhone渲染如下;请注意，两者都没有显示：

• 尺寸大于1
• 和高度在CSS中指定
• 并且未选择任何选项

删除CSS高度表示iPhone忽略了size属性。

Answer 1

基于堆栈溢出的其他主题的内容，看起来没有标准的方法：

• 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)

但第二个主题的作者编写了一个模拟该行为的插件：https://github.com/redhotsly/safarimobile-multiline-select

Answer 2

我使用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>');
}
});

像这样工作：

1. 等待文档加载

2. 如果用户使用iPhone，iPod或iPad访问该网站，请执行脚本

3. 使用文本在选择列表顶部添加选中和禁用的选项 ＆＃34; ..请选择一些＆＃34;。

在所有其他浏览器中没有任何功能，效果很好：D

Answer 3

如果您需要显示其中一个选项，请使用以下内容：HTML selected Attribute

---

---

您在firefox上的网页：

Answer 4

这里的人似乎可能没有完全理解这个问题。问题是iOS浏览器不会为不可选择的第一个字段呈现标签，这通常是“请选择...”类型指示符。如果未选中，iOS会将其呈现为空白。这是不可取的，因为用户可以选择，但该字段显示为空白。

您也不能以编程方式设置它以显示“请选择”，因为如果该字段是必需的，则表单验证不再有效，因为浏览器将第一个字段视为已选择，即使它被标记为不能选择的。

“Bug”是当iOS浏览器设置为不可选时，它不会显示第一个字段的标签。