how to return SELECT to default CSS after changing with JQUERY on SELECTED


Tags: jquery,css

Problem :

I want to highlight the user's choices on a series of SELECT, which I have accomplished with JQUERY.

Problem is that if the SELECT is returned to the default position it does not change back to 'plain' SELECT ( without the highlight).

Additionally the change with JQUERY changes the format of the SELECT BOX, somehow.

Please see fiddle at http://jsfiddle.net/BernardA/bM3p4/

My internet connection is limited these days, so I may be slow to respond to queries.

Thanks for your help!

The HTML is as below:

<form id="filtermodel">

<select id="fuelselect" class="specselect" name="fuel" >
<option value="none"> Fuel </option>
<option value="gas">Essence </option>
<option value="diesel">Diesel</option>
</select>

<select id="powerselect" class="specselect" name="power" >
<option value="0"> cv  </option>
<option value="100"> >100 hp </option>
<option value="150"> >150 hp </option>
<option value="200"> >200 hp </option>
</select>

<select id="mileageselect" class="specselect" name="mileage" >
<option value="100"> Mileage</option>
<option value="5"> <5l/100km </option>
<option value="6"> <6l/100km </option>
<option value="7"> <7l/100km </option>
</select>

<select id="co2select" class="specselect" name="co2" >
<option value="1000">co2</option>
<option value="100"> <100 co2 </option>
<option value="150"> <150 co2 </option>
<option value="180"> <180 co2</option>
</select>

<select id="doorsselect" class="specselect" name="doors" >
<option value="none">Doors</option>
<option value="two"> 2 </option>
<option value="three"> 3 </option>
<option value="four"> 4 </option>
<option value="five"> 5 </option>
</select>

<select id="trunkselect" class="specselect" name="trunk" >
<option value="0">trunk </option>
<option value="300"> >300 l </option>
<option value="500"> >500 l </option>
<option value="700"> >700 l </option>
</select>

And the JQUERY:

   $(function(){
 $("#filtermodel select").change(function (){
if("select option:selected"){
$(this).css("background", "#e90707");
$(this).css("color","#ffffff");
}
else{
    $(this).css("background", "");
$(this).css("color","#696969"); 
}
});
});


Solution :

DEMO HERE

$("#filtermodel select").change(function (){
    var selected = $(this).find("option:selected");
    var first = $(this).find("option:first");
    if(selected.val()!=first.val()){
        $(this).css("background", "#e90707");
        $(this).css("color","#ffffff");
    }
    else{
        $(this).css("background", "");
        $(this).css("color","#696969"); 
    }
});

    CSS Howto..

    how to set shadow for round image(css)

    How to write Hover property with CSS for a piece wih :after and :before properties?

    Print CSS: How do I open a new tab of the current page and append CSS?

    How to make div expand only from bottom down

    How to align stacked Font-Awesome icons correctly

    How do I mask a region of the page in a responsive design using CSS?

    How to create dynamic CSS class in in extjs or javascript

    How to position an icon in a metro-like web GUI? (images included)

    Semantic UI css messing with min-width property. How do I fix?

    how to remove selected option background color in IE browser through css?

    how to make “before” li is fixed at the bottom of li?

    How can I stop this ugly font smoothing with custom fonts in CSS?

    how to reference elements in CSS or JS files for fastest parsing?

    How to Grab an Icon Image

    how to toggle image in HTML-CSS? [duplicate]

    how to make this gradient vertical

    How to create nested css horizontal menu?

    How to create a line break instead of having text going on top of itself?

    How to access a directory one level up in CSS?

    CSS `will-change` - how to use it, how it works

    How to style text in JQuery?

    CSS How to make DIV Border Dynamic in Width

    how to make text transparent without changing to an image using css

    how to add css file to node js(not express) code

    How to sharpen an image in CSS?

    How to define a rectangular box for arbitrary contents in CSS/HTML?

    How to create custom archive page on Tumblr

    How to transform a button into this styled button

    How to position heading (h1) placed on a background image and centered according to it outside of its container

    How to Make Image Do All 3: Cover (left-to-right), Resize, and Scroll