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 pin sidebar to the top of page but within its parent element using HTML/CSS only

    How to shield a HTML tag from CSS?

    How to hide crossed-out CSS lines on firebug?

    CSS: How do I shrink a div to beyond a font's invisible padding?

    How to make a background text appear under youtube video?

    How to make 3 vertical dots using CSS?

    How to align content to the bottom of a div?

    How to lazyload svg image given in css?

    How do I move this scrolling bar closer to the post area?

    How to make CSS border on an image? [closed]

    How to use CSS property position:fixed with top:50px and height:100%?

    How to @import without including all CSS but just the @extends ones

    How can i make a site like this by myself? [closed]

    How can I set up a static Webkit Mask

    How to add part of css property value through scope in ng-style in angular

    Ionic on Codepen: how to start a new pen and get Ionic support

    How would I reverse a css transition property width?

    How do I keep multiple DIVs the same height using jQuery?

    How to get the type word inside the input field once after pressing the Comma key and not after pressing space bar

    How do you add 'box-sizing: border-box' to Normalize.css file?

    How to style the wp_list_page in wordpress?

    How to reveal content behind a div with pure css?

    How do I edit the CSS of the Html.DisplayFor method in MVC 3?

    IOs Cordova long-press shows text-select magnifying glass even with text-selection disabled, how to remove?

    How can i add a preload function for my images?

    How to fill a rectange from center html , css

    How to change label using CSS?

    How to render checked checkboxes using CSS alone?

    In jQuery how do I make multiple changes to css in a function?

    How do you change the background opacity in CSS?