Remove multiple select default background

Question

I have this multiple select for which I want to change the default background for an individidual <option>

<select size="8" name="lstSelectedPackages" style="width:100%">
  <option value="" selected="selected">Select</option>
</select>

fiddle: http://jsfiddle.net/ux4DD/180/

Thank you!

which background..?? body bg.?? select bg..?? div bg..?? what..?? — Dipesh Parmar, Feb 13 '13 at 10:54
Look at [here](http://stackoverflow.com/questions/2789741/html-how-to-set-background-color-of-item-in-select-element). — Marcus Vinicius, Feb 13 '13 at 11:02
Not possible: http://stackoverflow.com/questions/5089442/changing-the-background-color-of-the-selected-options-in-a-select-box — Jai, Feb 13 '13 at 11:23

zdesam · Answer 1 · 2013-02-13T11:13:23.533

2

Just change the background on style as below

<select size="8" name="lstSelectedPackages" style="width:100%; background:#fff999">
    <option value="" selected="selected">Select</option>
</select>

if you want to do it for all the select tag, then you can add below code on css

select{
   background: #fff999;
}

You can use jquery for that though as follows:

$("option:selected").css{"background", "#fff999"}

edited Feb 13 '13 at 11:13

answered Feb 13 '13 at 10:53

zdesam

2,936
3
25
32

1

I don't want to change the background of all select only for selected line :| – BurebistaRuler Feb 13 '13 at 10:56
for selected option you can try this one **option[selected]{background:#fff999}** Note: this may be browsers dependent though – zdesam Feb 13 '13 at 11:10

score 2 · Answer 2 · answered Feb 13 '13 at 11:04

If jQuery is best for you then i am sure this will surly help.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">

    $(function()
    {

        $("select option:selected").each(function ()
        {
            $(this).css('background-color','red');
        });

    });

</script>
<select name="garden">
    <option>Flowers</option>
    <option selected="selected">Shrubs</option>
    <option>Trees</option>
    <option>Bushes</option>
    <option>Grass</option>
    <option>Dirt</option>
</select>
<div></div>

score 1 · Answer 3 · answered Feb 13 '13 at 10:54

1

Updated fiddle showing how to do it: http://jsfiddle.net/ux4DD/181/

It should be noted that selects are notoriously unreliable when it comes to styling cross-browser so your styling may not appear consistently across all browsers/version.

select {
    height:50px;
    background-color: #dcdcdc;
}

If you only want one select to have a specific background color/style use a class to define it e.g.

<select class="my-select-class">
 <option>2</option>
</select>

.my-select-class {
    background-color: #dcdcdc;
}

It's not recommended to use inline styles on your web pages as this makes them a nightmare to maintain down the line.

Stick to external stylesheets.

answered Feb 13 '13 at 10:54

Billy Moat

20,792
7
45
37

I don't want to change the background of all select only for selected line :| – BurebistaRuler Feb 13 '13 at 10:57
@burebistaruler - Sorry, I see what you mean now, as far as I know that color is set by the operating system and cannot be changed. There may be a JavaScript solution but I'm not 100% sure. – Billy Moat Feb 13 '13 at 11:04

bipen · Answer 4 · 2013-02-13T11:09:15.320

1

use background-color

select{
  height:50px;
  background-color:green;

}

updated

using jquery.

$('option').css('background', 'none');
$('option:selected').css('backgroundColor', 'red');

fiddle here

edited Feb 13 '13 at 11:09

answered Feb 13 '13 at 10:55

bipen

36,319
9
49
62

I don't want to change the background of all select only for selected line :| – BurebistaRuler Feb 13 '13 at 10:58

score 1 · Answer 5 · edited May 23 '17 at 11:56

I think you want the answer like this

Jquery

$('.mySelect').change(function () {
$(this).find('option').css('background-color', 'transparent');
$(this).find('option:selected').css('background-color', 'red');
}).trigger('change');

Html

<select class="mySelect">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>

See Demo Refrence link

Remove multiple select default background

5 Answers5