How Can I Change The Colors Of A Drop-down Menu? using css or some other ways

[kenjvalip 0]

Hi guys, si ther anyone who can help me with modifying the color of my dropdown menu form? I used css in textboxes, and other things also.

[overture 0]

This way is using CSS.

The form:

   <form id="select" action="">   	 <p><select name="menu" class="jump" onchange="">       <option class="mnu_title" value="" selected="selected">// Title</option>     	 <option class="options" value="page.html">  Sub Item</option>      <option class="mnu_title" value="">// Title</option>     	 <option class="options" value="page.html">  Sub Item</option>      <option class="mnu_title" value="">// Title</option>     	 <option class="options" value="page.html">  Sub Item</option>      <option class="mnu_title" value="">// Title</option>     	 <option class="options" value="page.html">  Sub Item</option>   	 </select></p>    </form>

the CSS:

.jump {	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;	background-color: #dddddd;	color: #505050;	font-size: 10px;	width: 130px;}.mnu_title {	background-color: #dddddd;	font-weight: bold;}.options {	background-color: #eeeeee;	font-weight: normal;}

This is the menu and css that i have used before. the classes refer to the title items and sub items in the menu which i have made clear. The .options is the light colour grey and the .mnu_title is the dark grey. the .jump class formats the basic look of the menu itself - width, font face, font size and colour.

the reason classes are used instead of id's (#) is because classes are required when you want to use it more than once. with id's you can only use once on a page for example you can't have 2 divs with the same id. you can do this only if you want it to be valid css by the W3C standards.

[signatureimage 0]

Very nice, overture.

.jump {	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;	background-color: #dddddd;	color: #505050;	font-size: 10px;	width: 130px;}

What I have experienced with different browsers,
on different OS'es, is the way they handle the font-size.
Therefore, I now use the "point" instead of the "pixel" notation.

May I propose

font-size:10pt;

This works more uniformly on different browsers.

While we are on the subject of user-experience,
perhaps we should also adapt the "width" specification.
Especially when our surfer decides to change the text size
with the "view" menu of his/her browser.

Let's make shure that the dropdown menu always shows
at least 13 characters.
So instead of

width:130px;

which is good when the font is

font-size:10px;

- let's specify

width:13em;

which is 13 characters, regardless of font size...


Happy CSS'ing !

[Hercco 0]

You could do general definitions that work all over your site without the need to use "class="classname"" at every form element.

This works in proper browsers:

input[type="radio"] input[type="checkbox"]input[type="text"]input[type="submit"]etc...

Then of course you can pseudo-classes, like

input[type="text"]:hoverinput[type="text"]:focus

Particularly changing background (color or image) on focus is very user-friendly and prosessional looking. I personally like to add :hover borders for checkboxes and radio buttons.


In general using similar forms all over your site is good site and good UI designing.