Question

我试图在<select>属性下更改特定可选值的宽度，例如this。但我感到困扰，因为在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

this文章可以帮助您解决此问题

控制选择框的宽度

3 个答案:

HTML

CSS

的jQuery

检查http://jsfiddle.net/7Vv8u/2/