我有三个下拉列表（三个<select>元素）。我用css来设计它们：ios/safari/iPhone上的样式HTML选择标记
.dropdown{
font-size: 20px;
background: white;
border:none;
position: relative;
}
在铬中，它们看起来非常好。然而，当我测试的网站在我的iPhone 6S在Safari（IOS 10.2.1）的结果是有点不同，因为显示的图像： 
正如你可以看到有在background和箭头附近gradient的background是black。
我该如何设计
<select>元素，以便我可以在ios上使用背景white？
As Stian Martinsen suggested-webkit-appearance: none;禁用默认样式<select>标签，但它也隐藏了箭头。于是，我找到了解决方法与此代码：
.dropdown{
\t \t font-size: 20px;
\t \t background: white;
\t \t border:none;
\t \t position: relative;
\t \t -webkit-appearance: none;
padding-right: 10px;
\t }
\t .dropdown:focus{
\t \t outline: none;
\t }
\t .plain-selector{
\t \t margin: 0 3px;
\t }
\t .plain-selector::after{
\t \t content: "";
\t position: absolute;
\t z-index: 2;
\t bottom: 30%;
\t margin-top: -3px;
\t height: 0;
\t width: 0;
\t right: 0;
\t border-top: 6px solid black;
\t border-left: 6px solid transparent;
\t border-right: 6px solid transparent;
\t pointer-events: none;
\t }
\t .plain-selector::before{
\t \t content: "";
\t position: absolute;
\t z-index: 2;
\t top: 30%;
\t margin-top: -3px;
\t height: 0;
\t width: 0;
\t right: 0;
\t border-bottom: 6px solid black;
\t border-left: 6px solid transparent;
\t border-right: 6px solid transparent;
\t pointer-events: none;
\t }
\t .out-selector{
\t \t position: relative;
\t }
.outter-selection{
\t width: 100%;
}
.selection{
\t display: block;
\t margin: auto;
\t border-radius: 50px;
\t background: white;
\t padding: 5px;
\t max-width: 360px;
\t text-align: center;
\t width: 90%;
\t position: relative;
}
body{
\t \t margin-top: 4em;
\t \t background: #2f2f2f;
\t \t color: white;
\t \t font-size: 23px;
\t }<div class="outter-selection">
\t <div class="selection">
\t \t <span class="out-selector"><span class="plain-selector"><select class="dropdown">
\t \t \t <option value="1" selected="selected">select 1</option>
\t \t \t <option value="2">select 2</option>
\t \t \t <option value="3">select 3</option>
\t \t \t <option value="4">select 4</option>
\t \t </select></span></span>
\t \t <span class="out-selector"><span class="plain-selector"><select class="dropdown">
<option value="1" selected="selected">1</option>
\t \t \t <option value="2">2</option>
\t \t \t <option value="3">3</option>
\t \t \t <option value="4">4</option>
</select></span></span>
\t \t <span class="out-selector"><span class="plain-selector"><select class="dropdown">
<option value="1" selected="selected">1</option>
\t \t \t <option value="2">2</option>
\t \t \t <option value="3">3</option>
\t \t \t <option value="4">4</option>
</select></span></span>
\t </div>
</div>尝试加入这个CSS禁用内部监督办公室的默认样式：
-webkit-appearance: none;
这也会对获得特殊的造型，如输入[类型=搜索]其他元素的工作。
除了这个答案，请注意'
@StianMartinsen，这也将隐藏不是我想要的箭头。那么是否有解决方法来替换箭头？ –
您可以使用http://stackoverflow.com/a/33126467/4042468和CSS设置你的HTML。 – kerry
@kerry我不明白这对我有什么帮助。你能解释你的解决方法吗？ –
道歉，误解您的问题 – kerry