控制下拉框的宽度

Question

我试图改变在 <select> 属性下的特定可选值的宽度，类似于这个。但是我遇到了麻烦，在IE中，选择框和选项值一起扩展。有没有简单的方法使 <option> 只扩展而不是 <select> 框。。。主要是在IE中....

- Sachindra

Answer 1

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

这似乎是一个相当兼容的解决方案，可在所有较新的浏览器中使用。

- Cobra_Fast

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/查看工作示例。

- Hussein

---

使用JavaScript甚至jQuery来样式化本地HTML元素对我来说似乎完全是错误的。 - Cobra_Fast

Answer 3

样式化 <select> 元素有点棘手，因为没有跨浏览器的解决方案，除非使用 JavaScript - 因为每个浏览器处理表单控件的呈现方式都不同。

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

this 文章可能会对您有所帮助

- BigFatBaby