在 iOS 上设置 <select> 的样式

Question

我正在为Android和iOS开发一个网络应用程序。

我遇到了应用程序样式的问题。

由于某种原因，应用于 a 的样式<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模拟器中的小提琴：