控制選擇框的寬度

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

這篇文章可能對你有幫助