呈現在Android/iOS的瀏覽器多選選項

Question

我想呈現同樣的方式桌面瀏覽器目前這類項目

<select size="10" name="selectionList"> 
    <option value="5">Sparrow</option> 
    <option value="18">Snowbunting</option> 
    <option value="13">Purple-crowned Fairywren</option> 
    <option value="19">Eagle</option> 
    <option value="16">Hawk</option> 
</select> 

在任何標準的臺式機的Web瀏覽器，這些項目呈現以下一個一個的下面的多個選項另一個在左側有一個潛在的滾動條。但是，在Android和iOS瀏覽器上，只有選定的項目纔會被渲染，剩下的分配空間將被浪費。當嘗試選擇時，會顯示選項菜單對話框。

通常，由於我指定了size =「10」，所以應該同時顯示最多10個項目。我可以理解爲什麼他們選擇像他們那樣實現它，但我希望有一個簡單的CSS技巧來改變默認行爲。

如何讓移動設備瀏覽器以與桌面瀏覽器相同的方式呈現我的選擇選項，而無需顯示選項菜單對話框。

Answer 1

現在在Android 2.3.3 SDK中嘗試它 - 如果您將邊框添加到CSS，例如： style =「border：solid 1px＃999999」，它會顯示全尺寸選擇框。但是由於某些原因，選定的選項是不可見的。瀏覽器太麻煩了。

Answer 2

我不認爲多重選擇是正確的工具。我寧願使用多個複選框來代替。如果列表非常廣泛，您還可以在頂部添加一個搜索輸入，以便即時過濾列表。