Как исправить усеченный текст в элементе <select> на iOS7

Есть ли способ предотвратить обрезание текста iOS7 при выборе опции в элементе html select? iOS7 обрезает текст в тексте параметров, а не обертывает его. В моем конкретном случае это совершенно непригодно:

enter image description here

Приведенный снимок экрана был взят из приложения html 5, созданного с помощью jQuery Mobile. Я должен также упомянуть, что этот вопрос отсутствует на iOS6.

Ответы

Ответ 1

Добавьте пустой конец optgroup в конец списка выбора:

 <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

Как и ответ выше, но добавьте пустую optgroup для каждого выбора в документе с помощью JS:

// iOS 7 hack: Add an optgroup to every select in order to avoid truncating the content
if (navigator.userAgent.match(/(iPad|iPhone|iPod touch);.*CPU.*OS 7_\d/i)) {
    var selects = document.querySelectorAll("select");
    for (var i = 0; i < selects.length; i++ ){
        selects[i].appendChild(document.createElement("optgroup"));
    }
}

Надеюсь, это пригодится кому-то, имеющему ту же проблему.