12

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

4 Answers 4

11

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

1
  • 1
    I'm using version 4.0.3 and I had to change .select2-selection__placeholder because the select2-default class doesn't exist.
    – RTF
    Sep 7, 2017 at 12:16
8

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

.select2-selection__placeholder {
    color: #FF0000;
}
3
  • That's nice, but you must add the !important property in order to work.
    – Brhaka
    May 29, 2020 at 17:02
  • 1
    @Brhaka you should be including the select2 css before you add in your own ( you should do this as normal practice to avoid 3rd parties overwriting any styling in your project.) this way any of your customisations overwrite the defaults without the requirement of !important.
    – Richard
    Jun 1, 2020 at 20:40
  • Sure, that’s a good practice! But if you’re using inline or internal CSS, the !important property come in handy!
    – Brhaka
    Jun 1, 2020 at 21:31
3

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

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

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.