CODEWITHSUNDEEP
htmlcss
I love coding
I love coding

Reputation: 1191

Select item background color different for each option

I want to set different background color for each option in a select, in according to a specific class. 

 <select>
  <option class="yellow" value="1">Yellow</option>
  <option class="red" value="2">Red</option>
  <option class="green" value="3">Green</option>
</select>

So when I click on the select, this is what appears: enter image description here

I want when I open the select, that each option item, will have as background the color of the class, so something like this:

enter image description here

Upvotes: 1

Views: 2211

Answers (3)

Nico Vink
Nico Vink

Reputation: 21

I had a problem with this script, because it won't colorize the options inside the select when displayed by safari on OSX. I finally found out that by using Bootstrap it all works as i intentioned:

<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="utf-8" />
    <title>font test</title>
    <meta name="generator" content="BBEdit 10.5" />

    <link rel="stylesheet" type="text/css" href="yourpathto/css/bootstrap.min.css" async />
</head>
<body>
    <!-- test color dropdown -->
    <style>
    .hex1{background-color:#eee;}
    .hex2{background-color:red;}
    .hex3{background-color:navy;}
    .hex4{background-color:purple;}
    </style>
    <div id="colordropdown1" class="dropdown" style="width: 300px;">
    <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Kies een kleur
    <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
    <li role="presentation" class="hex1"><a role="menuitem">Grijs</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation" class="hex2"><a role="menuitem">Rood</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation" class="hex3"><a role="menuitem">Marine</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation" class="hex4"><a role="menuitem">Paars</a></li>
    <li role="presentation" class="divider"></li>
    </ul>
    </div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script type="text/javascript" src="yourpathto/js/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed --> 
<script type="text/javascript" src="yourpathto/js/bootstrap.js"></script>
</body>
</html>

Upvotes: 0

Aram Mkrtchyan
Aram Mkrtchyan

Reputation: 2700

Will be easy do like this without classes :)

   select option:nth-child(1) {
        background: yellow;
    }
    select option:nth-child(2) {
        background: red;
    }
    select option:nth-child(3) {
        background: green;
    }

or

select option:nth-of-type(1) {
            background: yellow;
        }
        select option:nth-of-type(2) {
            background: red;
        }
        select option:nth-of-type(3) {
            background: green;
        }

example

and example with jQuery that automatic take color and set background

jquery example

$("select option").each(function(){
    var color = $(this).attr("class");

    $(this).css("background", color);
});

firefox

enter image description here

chrome

enter image description here

Internet explorer

enter image description here

Upvotes: 2

Frank Winters
Frank Winters

Reputation: 193

You shoud use your class "yellow,red,green" and give them colors in your css

HTML

   <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Collors</title>
</head>
<body>

<select>
  <option class="yellow" value="1">Yellow</option>
  <option class="red" value="2">Red</option>
  <option class="green" value="3">Green</option>
</select>

</body>
</html>

css 

<style>
    .yellow{
        background-color: yellow;
    }    
    .red{
        background-color: red;
    }    
    .green{
        background-color: green;
    }
</style>

Upvotes: 3

Related Questions