JQuery CSS not applicable

Question

Is there a reason this CSS should not work?

$('.selector').css( 'background-color', '#74d04c', '-webkit-box-shadow','inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a', '-moz-box-shadow','inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a', 'box-shadow','inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a', 'border','1px solid #4c8932' ); 

The only thing that is displayed is the background color.

Answer 1

.css accepts either the name and value of a property, or a map. You can do it:

 $('.selector').css('color','blue'); 

... or that:

 $('.selector').css({'color':'blue', 'left':'100px'}); 

The problem is that you are mixing the two approaches. Instead, try doing this as follows:

 $('.selector').css({ 'background-color':'#74d04c', '-webkit-box-shadow':'inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a', etc... }); 

Answer 2

I think you should add different rules using javascript object notation, and not like a huge array.

Update: Yep - it accepts either two string parameters (key, value), or a map of key-value pairs. Source: http://api.jquery.com/css/

Answer 3

If you apply multiple rules, you need to pass the css function to the JS object. More details .

$ ("selector"). css ({"background-color": "red", "color": blue});

Answer 4

This should work:

 $('.selector').css({ 'background-color' : '#74d04c', '-webkit-box-shadow' : 'inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a', '-moz-box-shadow':'inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a', 'box-shadow':'inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a', 'border':'1px solid #4c8932' }); 

Demo

Answer 5

Correct your syntax.

 $('.selector').css({'background-color' : '#74d04c', '-webkit-box-shadow' : 'inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a', '-moz-box-shadow' : 'inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a', 'box-shadow' : 'inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a', 'border' : '1px solid #4c8932'}); 

Answer 6

If you want to set several of these CSS attributes, you need to use a map :

 $('.selector').css({ 'background-color':'#74d04c', '-webkit-box-shadow':'inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a', '-moz-box-shadow':'inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a', 'box-shadow':'inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a', 'border':'1px solid #4c8932' });