CODEWITHSUNDEEP
jquerycss
Kevin Brown
Kevin Brown

Reputation: 12650

jQuery CSS not applying

Is there any reason that this CSS shouldn't 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 one that is showing is the background-color.

Upvotes: 4

Views: 3911

Answers (6)

Ken Redler
Ken Redler

Reputation: 23943

.css takes either a property name and value, or a map. You can do this:

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

...or this:

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

The problem is that you're mixing the two approaches. Instead, try it like this: 

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

Upvotes: 11

Damiqib
Damiqib

Reputation: 1077

Fix 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'});

Upvotes: 1

Rion Williams
Rion Williams

Reputation: 76557

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

Upvotes: 1

kafuchau
kafuchau

Reputation: 5593

If you want to set multiple CSS attrs like that, 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'
            });

Upvotes: 0

Mark Hurd
Mark Hurd

Reputation: 13076

If you're applying multiple rules, you have to pass the css function a JS object. More details.

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

Upvotes: 1

kander
kander

Reputation: 4286

I think you're supposed to add the different rules using javascript object notation, not as 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/

Upvotes: 6

Related Questions