Clever Geek Handbook

Remove multiple selected background images

I have this multiple choice for which I want to change the default background for individual <option> 

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

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

Thank!

+3


source to share


5 answers


Just change the background style like below

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

if you want to do this for the whole select tag you can add below code in css



select{
   background: #fff999;
}

You can use jquery for this, but like this:

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


source


If jQuery

it's better for you, then I'm sure it will 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>
+2


source


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

It should be noted that selections are notoriously unreliable when it comes to styling cross-browser, so your style may not render consistently across all browsers / versions.

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

If you want one selection to have a specific background color / style use a class to define it eg.

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

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

It is not recommended to use inline styles on your webpages as it makes them a nightmare to maintain the line.

Stick to external style sheets.

+1


source


use background-color 

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

}

updated

using jquery.

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

violin here

+1


source


I think you want an 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 Link Refrence

+1


source






More articles:


All Articles