モバイルでSELECT OPTIONのサイズが機能しない

Question

PC上で次のコードを表示すると、4つのオプションがすべて表示されます。それは結構です！

ただし、モバイルで表示している間は、デフォルトのオプションのみが表示されます。それは実際の問題です。

注：size="4"を省略すると、PCの出力は上記のモバイル出力と同じになります。 size="4"はモバイル用ではないようです。

この問題を解決する方法。

.myClass select 
 
{ 
 
    width: 150px; 
 
    height: 165px; 
 
    padding: 5px; 
 
    font-size: 17px; 
 
}

<div class="myClass"> 
 
    <select name="mySelect" size="4"> 
 
     <option>1</option> 
 
     <option selected>2</option> 
 
     <option>3</option> 
 
     <option>4</option> 
 
     <option>5</option> 
 
     <option>6</option> 
 
     <option>7</option> 
 
     <option>8</option> 
 
    </select> 
 
</div>

Answer 1

奇妙に聞こえるが、値を2,3,4サイズattrが一部のデバイス（おそらくWebKitのブラウザ）上で動作しません、それは既知のバグです。

mediaqueryに基づいてオプションタグの数を手動で設定することができます。

Answer 2

Hm、ちょうど盲目的な推測ですが、おそらくCSSでappearanceを無効にしていますか？

参考：https://css-tricks.com/almanac/properties/a/appearance/

Answer 3

それはcommom状況です。多くは、この問題を扱っています

• StackOverflow: Select size attribute size not working in Chrome/Safari?
• StackOverflow: Select size on smartphone have normal dimension
  
• HTMLHelp.com: "broken" on smartphones?

どうやらこれは我々が期待するようなブラウザがsize=""属性をレンダリングするために必要されていないという事実から来ています。 W3 specs：SELECT要素がスクロールリストボックスとして提示されている場合

サイズ=番号[CN]
、この属性を同時に表示する必要があるリスト内の行の数を指定します。 視覚的ユーザエージェントは、リストボックスとしてSELECT要素を提示する必要はありません。ドロップダウンメニューなど、他のメカニズムを使用することもできます。
（emphasys鉱山）