Select item background color different for each option

Question

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

you can use ul > li to simulate this issue.http://stackoverflow.com/questions/1072239/is-it-possible-to-style-a-select-box — Todd Mark, Apr 02 '15 at 08:17
Have a look at this: http://stackoverflow.com/questions/12836227/change-select-box-option-background-color — PieterSchool, Apr 02 '15 at 08:19
The solution in that link, doesn't work as I want/asked. Thank you in all case — I love coding, Apr 02 '15 at 08:28

score 3 · Answer 1 · answered Apr 02 '15 at 08:16

3

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>

answered Apr 02 '15 at 08:16

Frank Winters

193
13

What web browser are you using, and could you show me more of you code ? – Frank Winters Apr 02 '15 at 08:30
@FrankWinters maybe it about browser compatibility, one more thing, http://stackoverflow.com/questions/1072239/is-it-possible-to-style-a-select-box , by the way, could you offer some jsFiddle or jsbin? Thanks. – Todd Mark Apr 02 '15 at 08:31

Aram Mkrtchyan · Accepted Answer · 2015-04-02T11:04:32.707

2

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

edited Apr 02 '15 at 11:04

answered Apr 02 '15 at 08:27

Aram Mkrtchyan

2,690
4
31
47

It doesn't work ! I want that when I open the select I will have the different option item, each one will have a specific color, like I posted in the second image. – I love coding Apr 02 '15 at 08:31
ah ok but you cant do that without javascript – Aram Mkrtchyan Apr 02 '15 at 08:34
If you want cant write with javascript – Aram Mkrtchyan Apr 02 '15 at 08:34
I don't why, but I can't see the color changes ! It seems it doesn't work – I love coding Apr 02 '15 at 10:48
http://jsfiddle.net/5suzvs64/1/ it's jquery version I add it on answer an it doesn't work??? – Aram Mkrtchyan Apr 02 '15 at 10:50
Are you joking? :D I tested on all browsers and put screenshots – Aram Mkrtchyan Apr 02 '15 at 11:06
Well, under Mac Os, both Google Chrome and Safari, the script doesn't work. Under Windows it works. What do you think could be the problem ? Also under iOs doesn't work. – I love coding Apr 02 '15 at 18:29
Hm It strange you know, maybe yes with only css it doesn't work, but with jquery it not possible... i will check it on ios and after that update my answer if I find any solution – Aram Mkrtchyan Apr 03 '15 at 06:25
the last solution you can create list and hide select and giv your style to li it will work on all browser and os's – Aram Mkrtchyan Apr 03 '15 at 08:13
Should I make some changes to let it work on iOs and Mac os ? – I love coding Apr 04 '15 at 08:37

score 0 · Answer 3 · answered Mar 04 '18 at 08:42

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>

Select item background color different for each option

3 Answers3