selectタグで詰まった話

selectタグをいじってる際,  スマホ上での見せ方で詰まったのでメモメモφ(・ω・ )

selectタグの高さとスマートフォン

selectタグを使ってドロップダウン？な選択をさせたい, といった時, なんか(表示領域)小さいね, といった一言から始まった問題.

問題点は「selectタグの領域に heightがうまくかからない端末がある」 といった現象.


ﾍ(ﾟ∀ﾟﾍ)ｱﾋｬ ∩( ・ω・)∩ ヽ(;´Д`)ノﾀｽｹﾃ～

<select class="face_collection">
<option>ﾍ(ﾟ∀ﾟﾍ)ｱﾋｬ </option>
<option>∩( ・ω・)∩</option>
<option>ヽ(;´Д`)ノﾀｽｹﾃ～</option>
</select><br />
<br />
<style>
.face_collection{
height: 40px;
}
</style>

PCで見ればなんら問題なくなんか太いドロップダウンメニューができるはず.
但し, このページを, おそらくAndroid4.1系のデフォルトブラウザで見ていただければわかるはず.

「別に太くなんて無いんだけど…(・д・`)」

iPhoneや Android2.x系では太くなるのに, なぜか Android4.1系では太く表示してもらえない.
また, 太くならないのはデフォルトブラウザでのみらしく,  Chromeであれば "少し"太く見える.
一体なんなんだか…('A`)

ﾍ(ﾟ∀ﾟﾍ)ｱﾋｬ ∩( ・ω・)∩ ヽ(;´Д`)ノﾀｽｹﾃ～







まぁ font-sizeを大きくしてやれば, それに合わせて大きくなるんですがね( ´_ゝ｀)