Change the background color of dropdownlist JQuery

Question

Below code doesn't seem to change the background color of dropdownlist. Please advice.

 var TextHighlightCss = {
        'background': '#FFFFAA',
        'border': '1px solid #FFAD33'
    };

 $('#ddlCarriers option:selected').css('TextHighlightCss');

Thanks in advance

BB

Answer 1

$('#ddlCarriers option:selected').css(TextHighlightCss);

You're passing a string, not your variable.

Answer 2

Remove the apostrophes from the .css() part and it should work.

Also, you may like to see this:

http://www.456bereastreet.com/lab/form_controls/select/

It shows the style differences between all browsers for select menus, quite handy.

Answer 3

Please do it like this, if you can help it:

CSS:

.hightlight {
  background: #FFFFAA;
  border: 1px solid #FFAD33;
}

JS:

$('#ddlCarriers option:selected').addClass("hightlight");

Guy who needs to refactor it in the future:

(n/a)