在 iOS 上设置 <select> 样式答案

【问题标题】：Styling a <select> on iOS在 iOS 上设置 <select> 样式
【发布时间】：2019-03-26 00:54:36
【问题描述】：

我正在为 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>？

【问题讨论】：

标签： ios css html safari mobile-safari

【解决方案1】：

快速简单的解决方法是申请-webkit-appearance: none。但是，您可能很快注意到您的元素丢失了 arrow 以表明它是一个 <select> 元素。

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

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

iOS 模拟器中的小提琴：

【讨论】：