如何使用jQuery从“选择框”插件中更改选择？

Question

I can't get why I can't dot this - it should be simple.

If some error div exists - I want to change Select box styling, but I'm failing to do this.

Here is how I set Select Box in my CSS file:

.selectBox-options{
-moz-box-shadow: 0px 3px 3px 3px rgba(98,141, 40, 0.2);
-webkit-box-shadow: 0px 3px 3px 3px rgba(98,141, 40, 0.2);
box-shadow: 0px 3px 3px 3px rgba(98,141, 40, 0.2);
border-bottom: 1px solid rgb(98,141, 40);
border-left: 1px solid rgb(98,141, 40);
border-right: 1px solid rgb(98,141, 40);
border-bottom-left-radius:3px;
border-bottom-right-radius: 3px;
}

Then if there is div, which called field_with_errors - I should change styling.

Here is code:

   if($('.field_with_errors').is(':visible')){
        alert('aaa')
        $('.selectBox-options').css({"-moz-box-shadow":"0 0 3px 3px rgba(222,162, 162, 0.4)"});
    }

Field_with_errors DO appears, because I get alert box.

How I can change border and box-shadow ?

Answer 1

use this for changing.

$('.selectBox-options').css("-moz-box-shadow","0 0 3px 3px rgba(222,162, 162, 0.4)");

beacause sytax for changing css is

$('#id').css('property','value');

Answer 2

You can try this,

$('.selectBox-options').css({"-moz-box-shadow":"0 0 3px 3px rgba(222,162, 162, 0.4)",
                            "-webkit-box-shadow":"0 0 3px 3px rgba(222,162, 162, 0.4)",
                             "box-shadow":"0 0 3px 3px rgba(222,162, 162, 0.4)",
                            });

JSFiddle