shrink width of select, multiple box

Question

One of the items in the multiple select box is much longer than the others, is there a way to hack it to make the width of it smaller

<select size="1">
<option>item</option>
<option>item</option>
<option>item is really long</option>
<option>item</option>
</select>

Answer 1

You can do this with CSS, either in-line style or using a class.

With in-line style:

<select style="width: 50px;">
 <option>item</option>
 <option>item</option>
 <option>item is really long</option>
 <option>item</option>
</select>

Using a class:

<select class="narrow">
 <option>item</option>
 <option>item</option>
 <option>item is really long</option>
 <option>item</option>
</select>

And in your CSS file or embedded stylesheet:

.narrow {
 width: 50px;
}

Of course, change 50px to whatever width you need.

Answer 2

You can set the width using CSS. If you add a class to the select tag, for instance 'foo', you can then add css:

select.foo {
   width: 200px;
}

If you want to can use an inline style (not recommended though):

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

Answer 3

Try this, works in FireFox but not in IE :

<STYLE type="text/css">
  OPTION.shorter{ font-size:8px;}
</STYLE>

<select size="1">
<option>item</option>
<option>item</option>
<option class="shorter">item is really long</option>
<option>item</option>
</select>