htmlのselectボックスの中のプルダウンの高さを変更する方法がわかりません。

Question

どなたか教えてください。
htmlのselectボックスをクリックするとプルダウンがでてきますが、そのプルダウン項目のline-heightのような高さを変更をしたいと思っております。いわゆるoptionタグにあたる部分かと思います。いろいろと試してみたのですが、外側のセレクト自体の高さを変えることはできるのですが、プルダウンの中身の並んでいる文字の高さを変えることができませんでした。どなたか知っている方がいらっしゃればどうかよろしくお願いします。

【環境】
ブラウザ：Google Chrome のみ、他のブラウザの使用はなし。

【条件】
CSSのみで変更。JSの使用はできない。

ブラウザはChromeのみで使用なのですが、JSは使えずCSSのみで実装しなければなりません。cssのファンクションなどは使用可能です。

どうかよろしくお願いします（＞＜）

Answer 1

optionの高さを変えることはcssのみでは実質不可能だと思います。
optionsの中身をcenter寄せするのもjsのプラグインが必要なくらいめんどくさい実装になります。

cssで頑張ればbefore擬似要素などで擬似的にデザインをカスタマイズ出来るっぽいですがあまりおすすめしないです。。。。
他のブラウザでおかしなことになってしまう可能性も無きにしもあらずなので。。。

解決策を提示できなくてすいません、、、、

Comments

[mie0224]

ご回答、ありがとうございます！
やはり難しいのですね。いろいろ試してみましたが、できませんでした。
ただ、サイズ変更してリストボックスの形にすると高さ変更できました。ただ、それだと本来の目的からはズレてしまうのであまり意味がないのですが、それを利用してJSと組み合わせて何か考えてみようと思います。
本当にありがとうございました！

Answer 2

結構無理やりですが、line-heightじゃなくて、上下にpaddingを入れて自分の理想のところまで文字列を持っていくのはどうでしょうか？

Comments

[mie0224]

ご回答、ありがとうございます！
selectにpaddingを入れるよう試みたのですが、入らないんです。
やり方が悪いのかもしれないですが・・・
どうも、サイズ変更してlistboxの形にすると入りました。
ありがとうございます！