...

View Full Version : How to specify width of dropdown list



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


<form>
<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>
</select>
</form>


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
Mz

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

<body>
...
<select id="myselect" ...>
...
</body>

And voila.

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

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

Any other ideas?


Mz

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

Mzungu
12-19-2004, 04: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?


Thanks,
Mz

AaronW
12-19-2004, 05: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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum