在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，表明它是一个<select>元素。

要解决这个问题，一个解决方法是使用div包装元素并使用CSS内容模仿箭头。

这是一个小提琴：http://jsfiddle.net/d6jhpo7v/

iOS模拟器中的小提琴：