在iOS上设置<select>的样式

Question

我正在为Android和iOS开发一个网络应用程序。 我在应用程序样式方面遇到问题。 由于某些原因，应用于的样式不会显示在MobileSafari（也称为iOS WebView）上 CSS： p， 输入， 选择， 选项， 按钮{     字体家族：Arial，ArialHebrew，sans-serif；     字体大小：x-large；     文本对齐：居中；     颜色：#FFF；     保证金：1vh;     填充：1vh； } 输入， 选择， 选项， 按钮{     背景颜色：＃333；     边界半径：1vh；     边框颜色：透明； } 我希望它的外观（Chrome，Android）： 外观（MobileSafari，iOS）： 我需要在CSS中进行哪些更改以将样式应用于？

Answer 1

快速简便的解决方法是应用-webkit-appearance: none。但是，您可能很快会发现您的元素丢失了arrow，以表明它是<select>元素。

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

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

还有iOS模拟器中的小提琴：