在 iOS 上设计 <select>

Question

我正在为 Android 和 iOS.[=18 开发网络应用程序=]

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

出于某种原因，应用于 <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 内容模仿箭头。

这是一个 Fiddle：http://jsfiddle.net/d6jhpo7v/

以及iOS模拟器中的fiddle：

在 iOS 上设计 <select>

Styling a <select> on iOS

html

css

safari

mobile-safari

ios