Given this simple html,

<select id="ddl">
    <option style="background:#0f0">a</option>       
    <option style="background:#f00;">b</option>   
    <option>c</option>
</select>

(/) You can see that each option has it's own background colour.

Unfortunately, when whatever option is selected (causing the dropdownlist to 'close'), the background remains white (or whatever the page default is).

Is it possible to have the background of the selected item be displayed in the dropdownlist after the selection has been made (ideally without using javascript)

Given this simple html,

<select id="ddl">
    <option style="background:#0f0">a</option>       
    <option style="background:#f00;">b</option>   
    <option>c</option>
</select>

(http://jsfiddle/DxK47/) You can see that each option has it's own background colour.

Unfortunately, when whatever option is selected (causing the dropdownlist to 'close'), the background remains white (or whatever the page default is).

Is it possible to have the background of the selected item be displayed in the dropdownlist after the selection has been made (ideally without using javascript)

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Sep 26, 2012 at 12:31 Snake Eyes 16.8k3939 gold badges118118 silver badges232232 bronze badges asked Sep 26, 2012 at 12:29 maxpmaxp 25.2k4141 gold badges130130 silver badges207207 bronze badges 2

• i found that issue in chrome and not in IE, just tried your fiddle and it was working normally in IE, can you give a try ? – Chandra Sekhar Walajapet Commented Sep 26, 2012 at 12:35
• do you want solutions without JS ? – automaticAllDramatic Commented Sep 26, 2012 at 12:39

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

Yes, is possible

JS:

$(function(){
    $("#ddl").on("change", function(){
        $("#ddl").css("background", $("#ddl option:selected").attr("style").replace("background:",""));
    });       
});

jsfiddle: http://jsfiddle/SnakeEyes/DxK47/3/

and remove the ; from second option

<option style="background:#f00;">b</option>

to

<option style="background:#f00">b</option>  

Other solution: http://jsfiddle/SnakeEyes/DxK47/13/

You can do it using Chosen library

Chosen is a JavaScript plugin that makes long, unwieldy select boxes much more user-friendly. It is currently available in both jQuery and Prototype flavors.

When CSS4 introduces the parent selector it may be possible, but for now there is no way to style a parent based on its children. In the meantime, here is a simple JS solution:

$("#ddl").change(function () {
   $(this).css('background-color', $(this).find(":selected").css('background-color'));
});

NOTE: this requires all of the <option> to have a specified background color even if it's white. That's pretty simple to do with JS too if you don't feel like it otherwise.

This can be easily done with a little bit of JavaScript. I made you a small example at JSFiddle: http://jsfiddle/DxK47/84/

I used jQuery here, I leave it to you as an exercise to do a similar trick with other js frameworks or even pure js if that's what you want.

$("#ddl").change(function(evt) {
  var select = evt.currentTarget;
  var item = select.item(select.selectedIndex);
  var style = $(item).attr("style");
  if (style) {
    $("#ddl").css({"background-color": style.substring(11)});
  } else {
    $("#ddl").css({"background-color": ""});
  }
});

Edit: I was too slow (and not a jQuery expert), look at above answers for more brief examples that do basically the same.

This syntax will work in XHTML and does not work in IE6, but this is a non-javascript way, as you requested:

option[selected] { background: #f00; }

If you want to do this on-the-fly, then you would have to go with javascript, the way others have suggested....