controlling the width for a select box

Question

i was trying to change the width of a particular optional value under <select> attribute, something like this. But i am getting troubled as in IE the select box along with the option value gets expanded. Is there any simple way to make the <option> only to expand and not the <select> box.. mainly in IE ....

Solution 1

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

Seems to be quite compatible solution working with all newer browsers.

Solution 2

This can be done using the jQuery plugin found at
http://www.jainaewen.com/files/javascript/jquery/ie-select-style/#demo

The plugin is very simple to use. Here's a breakdown of some full working code.

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

Don't forget to include the jQuery Js file and this plugins' Js file.

<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>

Then put the following right after:

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

All this should go before the closing </body> tag

Check working example at http://jsfiddle.net/7Vv8u/2/