styling options

is is possible?

[theonliest]

Does anyone know whether it's possible to format text in a 'pull down' options box using CSS (or anything for that matter)?
I've seen a few on big sites that are just defaulting to your browser font?
it seems like it should be straightforward but after tinkering around for a while I can't get anything to work.

[Birdman]

It only works in IE, I believe. Give it a go and see what you come up with, but remember certain styles won't render in certain browsers.

[u]Stylesheet[/u]

option{
font: normal bold 150% arial, verdana, helvetica, sans-serif;
}

<added>Hey Nick, look at that CSS Shorthand [webmasterworld.com];)</added>

[theonliest]

well, unfortunately it doesn't really work on IE at all,
I'm trying to control the text size which I can't, although it sort of works in NN6, well on the drop down bit anyway but not in the original box, so it just looks weird.
it seems you can control background and text colour (sorry I'm from 'Old Europe') but not font size!
it's all a bit unpredictable, I think I'll leave it...

another grand plan ruined by bizarre browser interpretations

[Nick_W]

I think I'll leave it...

That's what I ended up doing when I last tried this :( - I'd rather hoped someone might show us the 'secret' here but, like you said: Browsers!

Nick

[SuzyUK]

tested working in IE6 Opera6 & NN6

<form>
<select size="1" class="drop">
<option selected>choice 1</option>
<option>choice 2</option>
<option>choice 3</option>
<option>choice 4</option>
</select><input type="submit" value="Submit"><input type="reset" value="Reset">
</form>

css:
.drop{
font-family: arial;
font-size: 1.5em;
font-weight: bold;
}

Suzy

[Nick_W]

If I remember correctly, (it was a long time ago I did it...) it's IE5 and 5.5 that doesn't like it. Or am I talking rubbish, that's exactly the way I'd do it Suzy so I'm sure it must be how I tried it before?

Nick

[theonliest]

doh, you just beat me Suzy,
I was going to try and sound clever but it's a bit late now!
yes it's the 'select' selector that allows you to define the font size, decoration etc, which I just figured out.
however if you define colours for the 'option' selector it overrides colours defined for 'select' (except in the box itself on NN6!),
it's probably easier to just define a class for select and leave the rest alone.

another one bites the dust!

[theonliest]

this seems to works in IE5.5 too!

[SuzyUK]

theoneliest..this time you beat me to it!

Yes it works in 5.5

but..I noticed that when I added background color (Old Europe here too, but I gave in!) Opera still enlarge the font, but didn't like the color...

so you see...nothings perfect :)

Suzy