5.3. Setting Styles for Select and Option Elements
Problem
You want to alter the look of list menus in a form by changing the color and font, as in Figure 5-5.
Figure 5-5. The select and option elements with styles applied
Solution
Use a type selector to
associate styles with select
elements:
select { color: white; background-color: blue; font-size: 0.9em; } option { padding: 4px; }
Discussion
Unlike input form
elements, there is only one type
of select
element, so associating styles to that
element is straightforward and can be done through a type selector.
Styling the option
element is just as easy.
To stylize alternating options in a select
list,
first include the class
attribute in the
option
element:
<select name="Topping_ID" size="6" multiple> <option value="1">Pepperoni</option> <option value="2" class="even">Sausage</option> <option value="3">Green Peppers</option> <option value="4" class="even">Pineapple</option> <option value="5">Chicken</option> <option value="6" class="even">Ham</option> <option value="7">Olives</option> <option value="8" class="even">Onions</option> <option value="9">Red Peppers</option> </select>
Then set up the CSS rules for the two sets of
option
elements, making sure that the
option
elements with an even value (as noted by
the class
selector even)
look
different from the others. For example, option
elements with an even
selector have a background color of ...
Get CSS Cookbook now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.