Set select2 placeholder color with Jquery

Question

So this is how to set the color with Css:
.select2-container--default .select2-selection--single .select2selection__placeholder {color: #444;}

But how can i change the color with Jquery using "this"?

$(this).css('color', 'red') Don't work.
$(this)[0].css('color', 'red') Don't work.
$(this[0]).css('color', 'red') Don't work.

EDIT
console.log( $this) )
0:select#employment.form-control.select2.req_place

Can you show us what you tried ? We can't tell why "this" is not working since we don't what "this" is referring to. — ThEBiShOp, Dec 21 '16 at 13:18

score 2 · Accepted Answer · answered Dec 21 '16 at 13:48

2

Since your $(this) shows that it is a select element. You need to find its sibling .select2-container which is what is shown on the UI. And within this sibling find .select2-selection__placeholder and change its color.

So use this code.

$(this).siblings('.select2-container').find('.select2-selection__placeholder').css('color', 'red');

answered Dec 21 '16 at 13:48

Rajshekar Reddy

17,202
3
34
54

Works like a charm. Perfect! – Björn C Dec 21 '16 at 13:55
@BjörnC enjoy your day :D – Rajshekar Reddy Dec 21 '16 at 13:57

score 2 · Answer 2 · answered Jul 10 '18 at 13:16

2

You can also use this:

.select2-search__field::placeholder{
    color: #cecfd0;
}
.select2-search__field:-ms-input-placeholder {
    color: #cecfd0;
}
.select2-search__field::-ms-input-placeholder {
    color: #cecfd0;
}

answered Jul 10 '18 at 13:16

Vladislav Nosenko

581
4
3

Set select2 placeholder color with Jquery

2 Answers2