我如何設計Android手機上的select元素？

我正在開發一個移動網站，並在iPhone和Android手機上進行測試。我改變了使用CSS在頁面上的選擇框的外觀。我如何設計Android手機上的select元素？

這在iPhone瀏覽器中顯示效果很好，但在Android中不能正確應用樣式。原始下拉箭頭仍然存在（並且由於高度屬性而被垂直拉伸）。

有什麼辦法告訴瀏覽器如何在Android設備上設置這個元素的樣式？還是不支持？

這裏是我的代碼示例：

HTML：

<div class="filter-group"> 
    <select class="bigInput" id="f_eventWho" name="f_eventWho" tabindex="1"> 
     <option id="f_public" selected="selected">For Everyone</option> 
     <option id="f_private">By invitation</option> 
     <option id="f_both">All Gatherings</option> 
    </select> 
</div>

CSS：

.bigInput 
{width: 125px; 
height: 50px; 
background-size: 15px; 
background: rgb(159, 209, 225) url(../img/small_down_arrow_20.png) no-repeat right; 
border: none; 
margin: 5px; 
font-size: 14px; 
}

來源

2013-06-21 Patrick Keane

它們將根據瀏覽器/操作系統/設備進行樣式設置，這與您無法更改單選按鈕外觀的方式相同。 –

還有就是風格的瀏覽器原生selectboxes，更不用說手機號碼一致的方式。

我已經找到了最好的解決方法是建立一個HTML下拉模仿的選擇框的行爲 - 我強烈建議SelectBoxIt如果你正在使用JQuery：http://gregfranko.com/jquery.selectBoxIt.js/

所有你所要做的就是調用$('select').selectboxit();它取代頁面上的所有選擇框都帶有可執行完全相同方式的可調整HTML元素。祝你好運！

來源

2013-06-21 17:50:44 CodeMoose

我是否正確地說這會在點擊時顯示屏幕上的選擇項目，而不是像許多手機瀏覽器上的應用程序菜單那樣彈出瀏覽器本機列表？ –

http://gregfranko.com/jquery.selectBoxIt.js/#MobileBrowsers說明了一切！ –

事實上 - 他用腳本做得很好 – CodeMoose

最好的解決方案是不嘗試和樣式選擇元素，特別是不在移動設備上。

這樣做既會損害可用性和性能，也會將中指擡向訪問者，讓他們知道你根本不關心他們。

請嘗試證明巨大的開銷（請看看selectBox對於頁面重量會有什麼樣的權限），您將針對您將向訪問者提供的好處（最多爲零）添加內容。

來源

2014-08-18 17:49:32

像SelectBoxIt這樣的插件的好處不僅僅是造型。您還可以聽到大量有用的活動，以及您可以使用的API方法（哪些常規選擇框沒有）。這些事件/方法可能對您的應用程序至關重要。此外，由於SelectBoxIt默認爲移動瀏覽器使用原生移動車輪界面，因此您不會損害可用性。最重要的是，我爲開發人員提供了一個定製構建工具：http://gregfranko.com/jquery.selectBoxIt.js/customDownload.html –

感謝Gregg，但這些對開發人員而不是訪客都有好處。可用性也可能受到頁面重量和加載時間的影響，所以即使使用默認的「對移動選擇無所作爲」方法，仍然可以通過添加頁面加載來影響UX。正如我所說的那樣，負責任的開發者應該在實施這些解決方案之前，總是試着去證明這些權衡的好處。 –

我如何設計Android手機上的select元素？

回答

相關問題