View Full Version : How to specify width of dropdown list

12-19-2004, 03:49 PM
I have the following code:

<select name="selectmenu" onchange="go(this.form)">
<option>VŠlg spil</option>
<option value="acquire.php">Acquire</option>
<option value="backgammon.php">Backgammon</option>
<option value="bloodbowl.php">Blood Bowl</option>
<option value="diplomacy.php">Diplomacy</option>
<option value="labyrint.php">Labyrint</option>
<option value="hex.php">Hex</option>
<option value="jeopardy.php">Jeopardy</option>

Which produces a beautiful dropdown. How do I force a specific width?

What happens with overflow?

It's not really that beautiful, is it? How do I change background colour and text colour?

Thanks a lot, and a merry Xmas to all

12-19-2004, 04:42 PM
<style type="text/css">
#myselect {
width: 200px;
background-color: #f00;
color: #fff;

<select id="myselect" ...>

And voila.

To learn more, check out: http://www.w3schools.com/css/

12-19-2004, 04:50 PM
Thanks, but that was my own first choice. It doesn't work, I'm afraid.

Any other ideas?


12-19-2004, 04:59 PM
Ooops, my mistake. It does work. Thanks, Aaron.

12-19-2004, 05:17 PM
Now, about overflow; Firefox lets the curtain adjust to the content but IE forces the width I specified. I'm actually happy with the way Firefox handles it (but I must say that I could imagine preferring the other) so how do I apply that to IE?

Also, how do I set the color of the option that is hovered upon?


12-19-2004, 06:03 PM
Selects aren't very stylable. I'd leave their widths alone. As for the styling the hovered option, you would in theory do #myself option:hover { /* styles here */ }, but I'm pretty sure not even Mozilla supports that. Mozilla (Firefox, anyway) lets you add padding and margins and borders to your option tags, so it might ackowledge the :hover, but likely not.

Selects are almost always ugly and clash with the design. The only way to make a pretty one would be to design it in Flash or JavaScript, though I would hate to rely on either.