Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Problem with CSS Dropdown Menu Appearance

need help with font and menu size

3:56 am on Oct 30, 2003 (gmt 0)

New User

10+ Year Member

joined:Oct 29, 2003
votes: 0

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

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.



11:32 am on Oct 30, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member blobfisk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Feb 25, 2002
votes: 0

Hey Speeeedy,

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

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

12:36 pm on Oct 30, 2003 (gmt 0)

Preferred Member

10+ Year Member

joined:July 26, 2002
votes: 0

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).

9:33 pm on Oct 30, 2003 (gmt 0)

New User

10+ Year Member

joined:Oct 29, 2003
votes: 0

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


10:23 am on Oct 31, 2003 (gmt 0)

New User

10+ Year Member

joined:Oct 29, 2003
votes: 0

Works awesome. Thanks again :)



Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members