Color the background of items in a Dropdown box in your HTML pages.

Sep 20, 2004  • HTML  • CSS

It is possible to color the background of items in a Dropdown box within your HTML pages. It’s very easy to do by setting the style CSS of the <option> tags within the <select> element.

Note: It’s worth noting that you’ll need to test this in your target browser and platform. This feature may or may not be supported for certain web browser and / or operating system combinations. This is especially true with the modern mobile device platforms.

Please see the below example:

Example

Source Code

<select>
<option value="">Highlight</option>
<option value="#000000" style="background-color: Black;color: #FFFFFF;">Black</option>
<option value="#808080" style="background-color: Gray;">Gray</option>
<option value="#A9A9A9" style="background-color: DarkGray;">DarkGray</option>
<option value="#D3D3D3" style="background-color: LightGrey;">LightGray</option>
<option value="#FFFFFF" style="background-color: White;">White</option>
<option value="#7FFFD4" style="background-color: Aquamarine;">Aquamarine</option>
<option value="#0000FF" style="background-color: Blue;">Blue</option>
<option value="#000080" style="background-color: Navy;color: #FFFFFF;">Navy</option>
<option value="#800080" style="background-color: Purple;color: #FFFFFF;">Purple</option>
<option value="#FF1493" style="background-color: DeepPink;">DeepPink</option>
<option value="#EE82EE" style="background-color: Violet;">Violet</option>
<option value="#FFC0CB" style="background-color: Pink;">Pink</option>
<option value="#006400" style="background-color: DarkGreen;color: #FFFFFF;">DarkGreen</option>
<option value="#008000" style="background-color: Green;color: #FFFFFF;">Green</option>
<option value="#9ACD32" style="background-color: YellowGreen;">YellowGreen</option>
<option value="#FFFF00" style="background-color: Yellow;">Yellow</option>
<option value="#FFA500" style="background-color: Orange;">Orange</option>
<option value="#FF0000" style="background-color: Red;">Red</option>
<option value="#A52A2A" style="background-color: Brown;">Brown</option>
<option value="#DEB887" style="background-color: BurlyWood;">BurlyWood</option>
<option value="#F5F5DC" style="background-color: Beige;">Beige</option>
</select>