5

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.net/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)

Snake Eyes
  • 16,287
  • 34
  • 113
  • 221
maxp
  • 24,209
  • 39
  • 123
  • 201

5 Answers5

3

Yes, is possible

JS:

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

jsfiddle: http://jsfiddle.net/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.net/SnakeEyes/DxK47/13/

Snake Eyes
  • 16,287
  • 34
  • 113
  • 221
  • Kinda nice, downside is would have to specify the background colour of every single option item, as the default is 'transparent' – maxp Sep 26 '12 at 12:39
  • @maxp: See **Other solution** – Snake Eyes Sep 26 '12 at 12:46
  • 1
    @SnakeEyes: Your "other solution" seems to work well, except no style is applied on page load (i.e., the select doesn't have a green background even though "a" is selected). This is easily remedied by running line three of your solution once *outside* the `on()` event. – Cᴏʀʏ Sep 26 '12 at 13:53
  • Of course, you can set that. I wrote only for `onchange` event. – Snake Eyes Sep 26 '12 at 14:47
  • 1
    This version removes the need to set each option item's bg colour using jquery. Also initialises as per Cory's comment. http://jsfiddle.net/b2PLY/ – maxp Sep 27 '12 at 12:57
2

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.

Ivan Dyachenko
  • 1,348
  • 9
  • 16
1

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.

Explosion Pills
  • 188,624
  • 52
  • 326
  • 405
1

This can be easily done with a little bit of JavaScript. I made you a small example at JSFiddle: http://jsfiddle.net/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.

Bertjan Broeksema
  • 1,541
  • 17
  • 28
-1

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....

automaticAllDramatic
  • 2,025
  • 1
  • 21
  • 25