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

Question

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

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

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

Answer 1

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

使占位符变灰的原始 CSS

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

更改首选占位符颜色

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

特定的占位符颜色（使用 id）

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

替换为原始input或select id

在这种情况下

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

看演示

Answer 2

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

.select2-selection__placeholder {
    color: #FF0000;
}

Answer 3

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

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

Answer 4

试试这个默认的 css

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