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.