jQuery CSS not applying

Question

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.

Which browsers have you tested this with? (As CSS3 does not work in every browser.) — Damiqib
– Damiqib, Commented Jan 10, 2011 at 18:45

Ken Redler · Accepted Answer · 2011-01-11 00:22:27Z

11

.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...
});

edited Jan 11, 2011 at 0:22

answered Jan 10, 2011 at 18:45

Ken Redler

23.9k8 gold badges60 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kander · Accepted Answer · 2011-01-10 18:45:11Z

6

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/

answered Jan 10, 2011 at 18:45

kander

4,3061 gold badge28 silver badges43 bronze badges

Comments

Mark Hurd · Accepted Answer · 2011-01-10 18:46:02Z

1

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

answered Jan 10, 2011 at 18:46

Mark Hurd

13.1k2 gold badges29 silver badges28 bronze badges

Comments

Rion Williams · Accepted Answer · 2011-01-10 18:47:46Z

1

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

answered Jan 10, 2011 at 18:47

Rion Williams

76.9k38 gold badges206 silver badges335 bronze badges

Comments

Damiqib · Accepted Answer · 2011-01-10 18:48:41Z

1

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

answered Jan 10, 2011 at 18:48

Damiqib

1,0772 gold badges13 silver badges23 bronze badges

Comments

kafuchau · Accepted Answer · 2011-01-10 18:47:43Z

0

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

answered Jan 10, 2011 at 18:47

kafuchau

5,6137 gold badges36 silver badges38 bronze badges

Collectives™ on Stack Overflow

jQuery CSS not applying

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related