iOS 6 选择菜单与 iOS 7 选择菜单答案

【问题标题】：iOS 6 Select Menu vs iOS 7 Select MenuiOS 6 选择菜单与 iOS 7 选择菜单
【发布时间】：2013-12-18 14:09:44
【问题描述】：

新 iOS 7 中的选择菜单（风车）会截断此照片中显示的项目。

有没有办法阻止默认情况下发生的截断，所以选择项“换行”所以选择体验的功能更像 iOS 6？！我正在寻找 CSS 和/或 jquery 解决方案。我也找不到关于这件事的任何话题......

这方面的任何支持都会有所帮助

我还检查了苹果的网站（看看他们是否做了不同的事情），他们的选择菜单也遇到了同样的问题。 http://i.stack.imgur.com/2eBCy.jpg

【问题讨论】：

这是一个关于 SO 的有用问题，stackoverflow.com/questions/19090160/…。
Apple 如何认为这是一个好的决定？你能安装一个不同的网络浏览器，看看它是否会受到同样的影响吗？也许这只是 Safari 特定的问题。
它在我的 iphone 上以 chrome 显示相同，可能仅适用于 webkit 浏览器。 :[
可悲的是-webkit-appearance: none; 不起作用，我只是在我正在开发的移动网站上测试了它。

标签： jquery ios css html

【解决方案1】：

好吧，事实证明，如果我插入一个虚假的选项组标签，它会禁用截断。

How to fix truncated text on <select> element on iOS7

<select>
  <option selected="" disabled="">Select a value</option>
  <option>Grumpy wizards make toxic brew for the evil Queen and Jack</option>
  <option>Quirky spud boys can jam after zapping five worthy Polysixes</option>
  <option>The wizard quickly jinxed the gnomes before they vaporized</option>
  <option>All questions asked by five watched experts amaze the judge</option>
  <optgroup label=""></optgroup>
 </select>

【讨论】：

【解决方案2】：

正如这里所说的 (-> Line Break in HTML Select Option?) 很遗憾，您无法在 <option> 标记中插入换行符（我自己尝试了几种可能的解决方案，但没有成功）。所以我真的不明白为什么苹果把它改成只有一行文字。我建议使用 jQuery Mobile（非常易于学习和使用），因为它有自己独立且可自定义的选择表单元素（在 API 文档中查找“自定义选择菜单”->http://api.jquerymobile.com/selectmenu/）。

【讨论】：