How to change css default select2 placeholder color?

I am using plug2. In the required fields, I need to indicate the color of the select2 label as red.

How to change the default value of select2 placeholder 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;
}
+4
source share
3 answers

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

Original CSS that makes grayscale

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

Change your preferred placeholder color

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

Specific color placeholder (using id)

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

Replace original inputor selectid

In this case

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

, , <option></option>, , .

<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>

+5

select2 css select . , css html:

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

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

.select2-selection__placeholder {
    color: #FF0000;
}
+1
source

Source: https://habr.com/ru/post/1536049/


All Articles