jQuery 如何更改默认select2占位符颜色的css?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/23004475/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-27 02:09:30  来源:igfitidea点击:

how to change the css of default select2 placeholder color?

jquerycss

提问by user3091530

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

我正在使用 select2 插件。在必填字段中,我必须将 select2 占位符颜色设置为红色。

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

如何将默认的 select2 占位符颜色更改为红色?

HTML

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

CSS

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

采纳答案by josephting

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

如果我正确理解你想要什么,你可能想使用这个选择器。

Original CSS which make the placeholder gray

使占位符变灰的原始 CSS

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

Change your preferred placeholder color

更改首选占位符颜色

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

Specific placeholder color (using id)

特定的占位符颜色(使用 id)

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

Replace with the original inputor selectid

替换为原始inputselectid

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.

此外,占位符工作的另一个注意事项,您必须添加一个空的<option></option>,否则将自动选择第一个选项,而不是占位符。

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

看演示

回答by Richard

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

给出的答案是旧的,您现在可以使用 css 类

.select2-selection__placeholder {
    color: #FF0000;
}

回答by chimmi

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

select2 将 css 类从源select标记复制到它的容器。因此,您可以简单地将这个 css 用于您的 html:

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