我有三個下拉列表（三個<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