如何设置选择输入占位符的颜色？答案

【问题标题】：How to set color of placeholder of Chosen selection input?如何设置选择输入占位符的颜色？
【发布时间】：2019-02-23 17:00:56
【问题描述】：

在我的 jQuery v3 / Bootstrap v4.1.2 应用程序中，我使用了 selected.jquery（版本 1.8.7），但我没有找到如何使用以下样式设置所选选择输入的占位符文本的颜色：

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
  color:    #c2c200 !important;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color:    #c2c200 !important;
  opacity:  1 !important;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
  color:    #c2c200 !important;
  opacity:  1 !important;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color:    ##c2c200 !important;
}
::-ms-input-placeholder { /* Microsoft Edge */
  color:    #c2c200 !important;
}

::placeholder { /* Most modern browsers support this now. */
  color:    ##c2c200 !important;
}

我用代码初始化它：

$(".chosen_select_box").chosen({
    disable_search_threshold: 10,
    allow_single_deselect: true,
    no_results_text: "Nothing found!",
});

你可以看看这个小提琴： http://jsfiddle.net/1Lpdk79r/3/

但它不适用于选定的输入。如何解决？

【问题讨论】：

你想改变什么颜色？ “选择项目”文本，如果选择下拉列表中的“pomme”或显示为药丸时的“pomme”？

标签： css bootstrap-4 jquery-chosen

【解决方案1】：

如果您查看 fiddle 的源代码，您会看到 Chosen 插件从您的选择中生成了一个文本输入，并将 placeholder 文本添加为输入值。它还设置输入的样式。所以你只需要用你自己的样式覆盖 Chosen 样式。

这会改变文本颜色：

.chosen-container-multi .chosen-choices li.search-field input[type="text"] {
    color: #c2c200;
}

Here's an updated version of your fiddle 显示结果。

【讨论】：