控制选择框的宽度

Question

我试图在<select>属性下更改特定可选值的宽度，类似这样 。 但我感到困扰，因为在IE中选择框以及选项值得到扩展。 是否有任何简单的方法使<option>只扩展而不是<select>框..主要是在IE ....

Answer 1

<select width="123" style="width: 123px;">...</select>

似乎是与所有较新浏览器兼容的完全兼容的解决方案。

Answer 2

这可以使用找到的jQuery插件来完成
http://www.jainaewen.com/files/javascript/jquery/ie-select-style/#demo

该插件使用起来非常简单。 这是一些完整工作代码的细分。

HTML

<select id="test" >
    <option>choose on</option>
    <option>aaaaaaaaaaaaaaaaaaaaaaa</option>
    <option>bbbbbbbbbbbbbbbbbbbbbbb</option>
    <option>ccccccccccccccccccccccc</option>
    <option>ddddddddddddddddddddddd</option>
</select>

CSS

#test{
    width:100px;
    border:1px solid red;
}

jQuery的

不要忘记包含jQuery Js文件和这个插件的Js文件。

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://files.jainaewen.com/files/javascript/jquery/ie-select-style/jquery.ie-select-style.min.js"></script>

然后在下面的内容之后：

<script type="text/javascript">
  $('#test').ieSelectStyle();
</script>

所有这些都应该在结束</body>标记之前

查看http://jsfiddle.net/7Vv8u/2/上的工作示例

Answer 3

样式<select>项是一个问题，因为没有使用JavaScript的跨浏览器解决方案 - 因为每个浏览器处理表单控件的呈现方式不同。

我建议使用<ul>元素并将功能/设计应用于更像<select>元素 - 使用JavaScript

这篇文章可能对你有帮助