Стилизация <select>на iOS

Question

Я разрабатываю веб-приложение для Android и iOS .

Я столкнулся с проблемой со стилем приложения.

По какой-то причине стили, примененные к <select>, не будут отображаться на MobileSafari (он же iOS WebView)

CSS:

p,
input,
select,
option,
button {
    font-family: Arial, ArialHebrew, sans-serif;
    font-size: x-large;
    text-align: center;
    color: #FFF;
    margin: 1vh;
    padding: 1vh;
}

input,
select,
option,
button {
    background-color: #333;
    border-radius: 1vh;
    border-color: transparent;
}

Как я хочу, чтобы это выглядело(Chrome, Android):

Как это выглядит (MobileSafari, iOS):

Что мне нужно изменить в моем CSS, чтобы применить стиль к <select>?

Answer 1

Быстрое и простое решение - применить -webkit-appearance: none.Однако вы можете быстро заметить, что ваш элемент потерял arrow, чтобы указать, что это элемент * 1003. *.

Вот скрипка: http://jsfiddle.net/d6jhpo7v/

И скрипка в симуляторе iOS: