iOS上Safari上的<select>元素上的不透明箭頭和樣式

我發現當我設置樣式元素（特別是background: transparent）時，iOS中的Safari中缺少箭頭。有沒有人遇到過這個問題，或知道爲什麼它隱藏瀏覽器Chrome瀏覽器？我是否可以使用條件語句爲iOS上的Safari應用CSS（無JS）？iOS上Safari上的<select>元素上的不透明箭頭和樣式

設備運行iOS 6.1.2。

這裏是iOS中（iPad2的）上的Safari截圖：

Safari iOS

這裏是Safari瀏覽器的截圖（桌面，Windows 7中，同樣爲所有其他桌面瀏覽器）：

Safari Desktop

CSS：

select.choose_state, 
select.choose_state option { 
    background: transparent; 
} 
select.choose_state { 
    border: 1px solid #000; 
    -webkit-appearance: none; 
    -webkit-border-radius: 0px; 
    outline: none; 

    float: right; 
    position: relative; 
    top: 35px; 
    margin-right: 15px; 
    font-size: 1.4em; 
}

HTML：

<select name="state_select" id="state_select" class="choose_state" size="1">[...]</select>

來源

2013-03-25 Patrick Moore

如果你告訴WebKit的刪除所有默認樣式，它會刪除它，也箭頭（iOS中）。您將不得不創建一個箭頭並將其移至選擇字段。

我製作了this pen，包含.dblarrow（CSS和HTML）的所有內容，並添加了標記爲/*Important*/的樣式。

來源

2013-03-25 20:33:02 aNewStart847

此答案是否工作？ – aNewStart847 2013-03-25 20:59:07

謝謝！我不得不應用一些條件格式，所以額外的箭頭只在Safari中可見，但是這有效。 – 2013-03-27 15:50:53

一個非常晚的答案，但一個人的小技巧。

下面的代碼在桌面上保持選擇透明，但讓iOS上的默認選擇樣式。

select { 
    background: rgba(0, 0, 0, 0.005); 
}

來源

2016-05-10 12:50:04

iOS上Safari上的<select>元素上的不透明箭頭和樣式

回答

相關問題