JavaScriptで生成したselectのoptionにline-heightまたはheightで高さを出したい

Question

optionに高さを出したいです
cssの記述の適応ではなくJavaScriptの構文で実現したいです
どうすればいいでしょうか

option.style.lineHeight="30px";
option.style.height="30px";
上記ではダメでした

<script>
window.onload=function(){
var select = document.createElement("select");
select.id="select";
select.style.width = "300px";
select.style.height = "50px";
document.body.appendChild(select);
var option = document.createElement("option");
option.text = "Kiwi";
select.add(option);
var option = document.createElement("option");
option.text = "Kiwi2";
select.add(option);
var option = document.createElement("option");
option.text = "Kiwi3";
option.style.lineHeight="30px";
option.style.height="30px";
select.add(option);
}
</script>

Comments

[maisumakun]

＞ cssの記述の適応ではなくJavaScriptの構文で実現したいです

cssでは実現できたのですか？

Answer 1

optionに高さを出したいです

無理です。
ドロップダウンメニューの中に表示されているoptionのラベルは CSS box ではないので、スタイルシートで書いてもJavaScriptで書いてもほとんどすべての CSS プロパティは効果がありません。

ドロップダウンメニューではない(multiple属性や2以上のsize属性が付いている)場合は、Safari 以外ならまあまあ CSS が効きます。

Answer 2

独自に修飾したいなら疑似セレクトボックスを作る必要があります
jQueryのselect2あたり試してみると良いかもしれません