Style Select and Option Elements

Give drop down list and other option elements a style that fit your page layout.

First style the select element. In this example we have given font size 16px and font weight bold.

Then style the option element. We use two styles here, one for regular and one for odd rows. See the class element in the select list. You can easy style each select element.

The CCS code:
select {
    font-size:16px;
    font-weight: bold;
}
option {
    color: white;
    background-color: #0066ff;
}
option.odd {
    color: yellow;
    background-color:#0033cc;
}
    

The drop down list code:
<form method="post"action="next_page.cfm">
  <select size="1"name="fovorite_pet">
    <option>Select your favorite pet:</option>
    <option value="Pig">Pig</option>
    <option value="Bird" class="odd">Bird</option>
    <option value="Fish">Fish</option>
    <option value="Cat" class="odd">Cat</option>
    <option value="Dog">Dog</option>
    <option value="Rabbit" class="odd">Rabbit</option>
  </select>
  <input name="Submit" type="submit"value="Favorite Pet" />
</form>

This will give a drop down list like this:
 

Advertisement

No User Comments.

No User Comments, be the first one to write your comments?