Basic Select Menus Modifications

Select menus, also known as drop down menus, are one of the elements in HTML that most people don’t modify at all. I know that some select menus can be confusing as they get longer. One of the things that I like to do is to alternate the colors of the selections. This gives the select element a little bit of style especially when you have more then one choice showing, and can be use as color combination to blend into your site’s theme.

This modification is very simple, and can be very effective. We are going to apply this to a select element that has more then one option showing to take advantage of the effect. If you only have one option showing, as in a true drop down menu, then the change is not as effective. If you don’t remember how to show more then one option in a select element, just add a size attribute inside the select element’s opening tags. Here is how the select element should appear.

<select size=”4″>
<option class=”odd”>Option 1</option>
<option class=”even”>Option 2</option>
<option class=”odd”>Option 3</option>
<option class=”even”>Option 4</option>
<option class=”odd”>Option 5</option>
<option class=”even”>Option 6</option>
</select>

The code should look similar to you if you have used the select tag before, only thing that we have done to this HTML code is to add a class attribute to each of the options, and set a size of five to the select menu. We see that the classes alternate as either odd or even. Now all we need to do is create the CSS to apply to the classes.

The CSS will be basic, just like the HTML. For the even class we are going to have a gray background with a white foreground color, and the opposite for the odd classes.

<style>
select .even{
background-color: gray;
color: white;
}
select .odd {
background-color: white;
color: gray;
}

That is all we need. We now have a more professional looking select menu, which can be changed to blend into the style of our website. You can view the example above, and another example that uses other alternating colors here.

Topics: CSS, Design, Web Development