css - 在选择框中设置选项的宽度

Question

我有一个不超过 100 像素宽的下拉列表。

但是，选择框中的选项需要以 200 像素显示。

有没有办法让选择框变小而选项变大？

目前选择框和选项的宽度是一样的；

到目前为止，我已经尝试了各种组合；

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/