CODEWITHSUNDEEP
jquerycss
user3091530
user3091530

Reputation: 630

how to change the css of default select2 placeholder color?

I am using select2 plugin. In the mandatory fields I have to give the select2 placeholder color as red.

How do I change the default select2 placeholder color to red?

HTML

<select id="leadadd_mode_of_enq" name="leadadd_mode_of_enq" class="select2 req_place" data-select-search="true" placeholder="Mode of enquiry">
    <option value="1">Opt1</option>
    <option value="2">Opt2</option>
</select>

CSS

.req_place::-webkit-select-placeholder{
    color:#FFF !important;
}

Upvotes: 12

Views: 32454

Answers (4)

Akashxolotl
Akashxolotl

Reputation: 566

Try this default css instead

  ::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: pink;
  }

  ::-moz-placeholder {
    /* Firefox 19+ */
    color: pink;
  }

  :-ms-input-placeholder {
    /* IE 10+ */
    color: pink;
  }

  :-moz-placeholder {
    /* Firefox 18- */
    color: pink;
  }

Upvotes: 1

Richard
Richard

Reputation: 778

the answers given are old and you can now use the css class

.select2-selection__placeholder {
    color: #FF0000;
}

Upvotes: 8

josephting
josephting

Reputation: 2665

If I understand what you want correctly, you probably want to use this selector.

Original CSS which make the placeholder gray

.select2-default {
  color: #f00 !important;
}

Change your preferred placeholder color

.select2-default {
  color: #f00 !important;
}

Specific placeholder color (using id)

#s2id_<elementid> .select2-default {
  color: #f00 !important;
}

Replace with the original input or select id

In this case

#s2id_leadadd_mode_of_enq .select2-default {
  color: #f00 !important;
}

Also, another note for placeholder to work, you have to add an empty <option></option> or else the first option will be automatically selected, but not the placeholder.

Like so

<select id="leadadd_mode_of_enq" name="leadadd_mode_of_enq" class="select2 req_place" data-select-search="true" placeholder="Mode of enquiry">
  <option></option>
  <option value="1">Opt1</option>
  <option value="2">Opt2</option>
</select>

See Demo

Upvotes: 11

chimmi
chimmi

Reputation: 2085

select2 copies css classes from source select tag to it's container. So, you can simply use this css for your html:

.select2-container.req_place .select2-default .select2-chosen { 
    color:#FFF !important; 
}

Upvotes: 3

Related Questions