无法使用Bootstrap 3更改占位符颜色
两个问题：
我正在尝试使占位符文本变成白色。 但它不起作用。 我正在使用Bootstrap 3. JSFiddle demo
另一个问题是如何更改占位符颜色不全球。 也就是说，我有多个字段，我只希望一个字段具有白色占位符，其他所有字段都保持默认颜色。
提前致谢。
HTML：
<form id="search-form" class="navbar-form navbar-left" role="search">
<div class="">
<div class="right-inner-addon"> <i class="icon-search search-submit"></i>
<input type="search" class="form-control" placeholder="search" />
</div>
</div>
</form>
CSS：
.right-inner-addon {
position: relative;
}
.right-inner-addon input {
padding-right: 30px;
background-color:#303030;
font-size: 13px;
color:white;
}
.right-inner-addon i {
position: absolute;
right: 0px;
padding: 10px 12px;
/* pointer-events: none; */
cursor: pointer;
color:white;
}
/* do not group these rules*/
::-webkit-input-placeholder { color: white; }
FF 4-18
:-moz-placeholder { color: white; }
FF 19+
::-moz-placeholder { color: white; }
IE 10+
:-ms-input-placeholder { color: white; }
将占位符分配给类选择器，如下所示：
.form-control::-webkit-input-placeholder { color: white; } /* WebKit, Blink, Edge */
.form-control:-moz-placeholder { color: white; } /* Mozilla Firefox 4 to 18 */
.form-control::-moz-placeholder { color: white; } /* Mozilla Firefox 19+ */
.form-control:-ms-input-placeholder { color: white; } /* Internet Explorer 10-11 */
.form-control::-ms-input-placeholder { color: white; } /* Microsoft Edge */
它会起作用，因为更强大的选择器可能会压倒你的全球。 我在平板电脑上，所以我无法检查并确认它是哪个更强大的选择器:)但它确实工作我在你的小提琴中尝试过。
这也回答你的第二个问题。 通过将它分配给一个类或id并给出一个只有该类的输入，你可以控制什么样的输入。
这里发布了一个关于此问题的问题：https：//github.com/twbs/bootstrap/issues/14107
该问题已通过此次提交得以解决：https：//github.com/twbs/bootstrap/commit/bd292ca3b89da982abf34473318c77ace3417fb5
因此，解决方案是将其覆盖回#999而不是建议的white （也覆盖所有引导样式，而不仅仅是webkit样式）：
.form-control::-moz-placeholder {
color: #999;
}
.form-control:-ms-input-placeholder {
color: #999;
}
.form-control::-webkit-input-placeholder {
color: #999;
}
一个可能的问题
建议的完整性检查 - 确保将form-control类添加到输入。
如果你的页面上加载了引导CSS，但你的输入没有
class="form-control"那么占位符CSS选择器将不适用于它们。
文档中的示例标记：
我知道这不适用于OP的标记，但是因为我一开始错过了这个，并花了一点努力去尝试调试它，我发布了这个答案来帮助其他人。
链接地址: http://www.djcxy.com/p/70463.html