You can assign classes to menu options, to create multiple background colors within the drop-down color. In this case you need to set only the color and background-color properties for a menu item. The next two test files show this:

 

File test.css

.blue {

background-color: #ADD8E6;

color: #000000;

}

.red {

background-color: #E20A0A;

color: #ffffff;

}

.green {

background-color: #3CB371;

color: #ffffff;

}

.yellow {

background-color: #FAFAD2;

color: #000000;

}

 

File test.html

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

“https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html xmlns=”https://www.w3.org/1999/xhtml” lang=”en-US”>

<head>

<title>How to use different colored highlights in a select menu with CSS</title>

<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />

<link rel=”stylesheet” type=”text/css” href=”test.css” />

</head>

<body>

<form method=”post” action=”example8.html”>

<p>

<label for=”color”>Select your favorite color:</label>

<select name=”color” id=”color”>

<option value=””>Select One</option>

<option value=”blue” class=”blue”>blue</option>

<option value=”red” class=”red”>red</option>

<option value=”green”>green</option>

<option value=”yellow” class=”yellow”>yellow</option>

</select>

</p>

<p>

<input type=”submit” name=”btnSubmit” id=”btnSubmit” value=”Send!” />

</p>

</form>

</body>

</html>

The next picture shows the result:

Using of different colored highlights in a select menu with CSS

Using of different colored highlights in a select menu with CSS