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>

See Demo

Answer 2

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

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

Answer 3

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

.select2-selection__placeholder {
    color: #FF0000;
}

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

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

4 个答案: