Question

问题：

我的下拉列表是动态加载的，有一些选项很长，这会弄乱我的页面布局。我希望select元素的大小很小，但展开后，允许用户查看所有长options。为此，我将width的{{1}}设置为固定值，例如SELECT

预期/所需行为（适用于Chrome）

enter image description here IE8中的实际行为

enter image description here

我尝试了什么：

width:200px;

简化的提示：

http://jsfiddle.net/gCbhq/2/

Answer 1

确定。不确定这是否有帮助。我正在使用Jquery Mobile，我的选择按钮仅限图标（= 28px）。在IE8上我所有的选择因此也是28px。

我用它修理了它：

select { min-width: 150px !important; }

但这只能起作用，因为Jquery Mobile会隐藏选择并将其自己的元素添加到“顶部”。

唉，这是一个修复 - http://css-tricks.com/select-cuts-off-options-in-ie-fix/

Answer 2

你所能做的就是破解它所以它看起来很接近。仅通过添加/更改select的CSS来无法模拟Chrome行为。

这是在没有添加任何其他元素的情况下尽可能接近：

http://css-tricks.com/examples/SelectCutoffFix/ （点击返回顶部的文章了解实施细节）

上述解决方案是您可以做的最好的解决方案，select周围没有其他元素。

如果您愿意在div（无替换或特殊UI小部件）周围添加select样式，可以让它看起来更好一些：

http://www.getharvest.com/blog/wp-content/uploads/2009/12/select_box_demo.html

（详情请见http://www.getharvest.com/blog/2009/12/dropdown-problems-on-internet-explorer/）

这个解决方案与我所看到的一样接近你正在寻找的东西。据说这是一个黑客，并有一些问题：

如果您连续两次选择相同的option，则在焦点离开select
当select打开时，向下箭头按钮消失（因为溢出被隐藏的div隐藏）

上述解决方案会让你更接近，但它们看起来都不如我想要的那么精致。但是，如果您无法在页面中添加任何其他内容，这些将是您的最佳选择（基于过去无数个小时的研究）。是的，它很糟糕，但我们都在同一条船上。

祝你好运！

Answer 3

没有一个确切的解决方案，但你可以给这个小的HTML和CSS黑客来实现你的目标。的 HTML

<div class="divWrapper"> <select class="selectBox"> <option>011111111111111111111111111111111111111111111111111112</option> <option>011111111111111111111111111111111111111111111111111112</option> <option>011111111111111111111111111111111111111111111111111112</option> <option>011111111111111111111111111111111111111111111111111112</option> </select> </div>

<强> CSS

.divWrapper{ width:150px; overflow:hidden; } .selectBox{ width:150px; } .selectBox:focus{ width:auto; }

这里我们用div包装selectbox，其宽度必须等于selectbox div。并且在selectbox的焦点上再次使其自动宽度。

如果你想要jquery使用jquery部分。当您选择任何选项时，它将调整选择框的宽度。在http://jsfiddle.net/sudhanshu414/5NEWc/2/
上查看

Answer 4

这是我用作此问题的纯css解决方案。如果专注于选择推送任何其他页面元素我只需z选择select：focus。您也可以将选择：焦点宽度设置为自动，如果需要，它仍然有效。

<!DOCTYPE html>
<html lang="en">
  <head>
<style type="text/css">
select:focus {width:300px;}
.cover select {width: 150px;} 
</style>

  </head>
  <body>


<div class="cover">
<select>
 <option>Select Box</option>
 <option>Option One a line of text</option>
 <option>Option Two a longer line of text</option>
 <option>Option Three is a much longer line of text</option>
 <option>Option Four </option>
</select>
</div>


  </body>
</html>

如果删除“封面”类并仅选择样式，则选择也会在焦点上调整大小。所以你可以选择你希望它显示的方式。

已在最新版本的chrome，firefox和IE

中测试过

Answer 5

我无法重现这种行为，但您可以尝试使用css：

select:focus{width:auto !important;}

但你也可以看看JQuery-UI。

[EDIT-1-]：我试图重现IE的意外行为。在7/8/9我看不出问题。也许你正在使用一个非常老的IE？如果可能，请尝试运行版本8的更新。

你想做什么，影响深远。我不认为你可以访问孩子改变他们的外观，同时保持SELECT父母的正常大小。你需要解耦这两个元素。您可以尝试为下拉列表实现自己的解决方案，但因为它似乎是其他浏览器（如其他IE版本，Chrome等）的正常行为，这可能是浪费工作。

$(document).ready(function(){
  $('select').click( function () { 
     //Try to alter the css here - but I'm not sure if this could work.
  });

[编辑2-]：计划select-menu for JQuery-UI。但是如果你考虑其他JQuery插件，你可以使用dropkick.js或take a look at this list。

Answer 6

在IE中不单独使用CSS，因为它或多或少是你要设计风格的操作系统小部件。

尝试一个selectBox，它使用JavaScript插入一些HTML和JavaScript来模仿select的bahaviour但使用其他HTML标记

https://github.com/revsystems/jQuery-SelectBox或此处 http://www.bulgaria-web-developers.com/projects/javascript/selectbox/

如何保持SELECT Element的宽度小但OPTION灵活

6 个答案: