css - セレクト ボックスのオプションの幅を設定する

Question

幅が 100px 以下である必要があるドロップダウン リストがあります。

ただし、選択ボックス内のオプションは 200px で表示する必要があります。

選択ボックスを小さくしてオプションを大きくする方法はありますか?

現在、選択ボックスとオプションは同じ幅です。

これまでのところ、さまざまな組み合わせを試してきました。

select.treeItem.Destination { width:130px; } 
select.treeItem.Destination option {width:auto;}

Answer 1

これが必要だと思います。

これは IE 6-8 固有の問題で、小さな JavaScript で問題を回避できます。

 <!--[if lt IE 9]>
 <script>
 var el;

$("select")
.each(function() {
el = $(this);
el.data("origWidth", el.outerWidth()) // IE 8 padding
})
.mouseenter(function(){
$(this).css("width", "auto");
})
.bind("blur change", function(){
el = $(this);
el.css("width", el.data("origWidth"));
});
</script>
<![endif]-->

スクリプトの詳細については、http://css-tricks.com/select-cuts-off-options-in-ie-fix/を参照してください。