選擇箭頭不會出現在iPhone上

我正在製作一個響應式網站，它有一個選擇標籤，允許用戶選擇他們想要顯示的博客帖子的類別，html僅僅是一個基本的選擇標籤。

<select name=""> 
    <option value="">Sort by Category</option> 
    <option value="">test</option> 
    <option value="">Test</option> 
</select>

我再有風格選擇標籤下面的代碼

.portfolio-thumbs select { 
    width:100%; 
    padding:0.625em; 
    border:none; 
    background:#33c3e2; 
    color:#fff; 
    font-size:1.125em; 
} 

select { 
    -webkit-appearance: none; 
    border-radius: 0; 
}

這工作正常的Windows手機，但在iPhone，黑莓和Android的選擇對話框不顯示的箭頭。有沒有人遇到過這個問題之前，知道我在做什麼我的CSS禁用箭頭顯示或有一個解決方案，讓箭頭回來，同時仍然能夠風格選擇我想要的。

來源

2013-08-23 StephenJRomero

選擇框會造成很大的痛苦。在過去，我嘗試過使用JQuery Mobile選擇框（醜陋，四捨五入和屠夫DOM）和Bootstrap選擇框。仍然沒有100％相信最好的方式。這可能有所幫助：http://stackoverflow.com/a/11186039/1061602 –

嘗試刪除-webkit外觀 – Huangism

刪除webkit外觀？這可能導致問題。 – kangoroo

-webkit-appearance: none;行告訴webkit瀏覽器（iPhone，BB和'droid）不顯示默認的<select>外觀。刪除此行將恢復箭頭。

正如評論中提到的，<select>是一種真正的風格。唯一現實的選擇，如果你想真正控制它如何使用@AdamMarshal提到的替代技術。

或者，如果您絕對必須使用<select>和-webkit-appearance: none;，請添加箭頭的背景圖像。

來源

2013-08-23 15:36:20 SimonR

不是絕對必須的，與背景圖像的問題是，在Firefox和IE瀏覽器的背景圖像會顯示在箭頭下，所以我決定下去的jQuery替換路線 – StephenJRomero

哇，我希望一個css解決方案即將出現這在未來 –

選擇箭頭不會出現在iPhone上

回答

相關問題