Problem with CSS Dropdown Menu Appearance

need help with font and menu size

[Speeeedy]

Hello peoples!

I never had to use it so I never learned how to create a custom drop-down menu.

I need the following:
A dropdown menu with a background color, and the height of the menu to be less than default, as well as the font to be smaller than default.

I have no problems with getting the background color and font, but nothing else seems to work.

Here is the code that works so far:

option {background-color:#ff0;color:#000;}

<form action="blahblah" method="post">
<input type="hidden" name="Animals" value="Animals">
<select name="Animals">
<option value="#">Choose Animal >
<option value="Dog">Dog
<option value="Cat">Cat
</select>
</form>

I assume it may have something to do with a DIV or a CLASS entered somewhere in the form or input, but I can't get the font-size or size of menu itself to shrink. Does it have anything to do with <form style="CSS/TEXT"> or something similar? Any help is much appreciated.

Thanks!

--Jim---

[BlobFisk]

Hey Speeeedy,

Various browser allow varying degrees of styling to be applied to option lists...

IE allows the least, so be aware of that...

[jetboy_70]

Apply your font style to the <select> tag instead of the <option> tags and it should work. In IE the height is governed by its contents (smaller font - smaller <select>). I *think* you can alter the the height in Opera. A width can also be applied to the <select> tag, but Netscape 4 will not pick this up (although there is a Netscape 4-specific HTML tag to do this I believe).

Borders can be altered (again, applied to the <select> tag) and these changes will display in Netscape 6+/Mozilla etc., but not IE. Not sure about Opera.

Font style applied to the <form> element will be picked up by Netscape 4, which won't see the styles if they are applied to the <select>.

That about covers it. You can't change the colour or style of the <select> arrow as this is created by the OS (and will look different across OS's).

[Speeeedy]

Thanks a lot for responding. I'll try this out today and give an update later.

--Jim---

[Speeeedy]

Works awesome. Thanks again :)

--Jim---