无法使用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; }
将占位符分配给类select器，如下所示：
.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 */
它会起作用，因为一个更强大的select者可能凌驾于你的全球。 我在平板电脑上，所以我无法检查，并确认哪一个更强大的select器:)但它确实工作，我试着在你的小提琴。
这也回答你的第二个问题。 通过将它分配给一个类或id，并给出一个只有该类的input，你可以控制什么样的input。
这里有一个关于这个问题的post： https : //github.com/twbs/bootstrap/issues/14107
这个问题解决了这个提交： https : //github.com/twbs/bootstrap/commit/bd292ca3b89da982abf34473318c77ace3417fb5
因此，解决scheme是将其重新覆盖到#999而不是像build议的那样是white （也覆盖所有引导样式，而不仅仅是webkit样式）：
.form-control::-moz-placeholder { color: #999; } .form-control:-ms-input-placeholder { color: #999; } .form-control::-webkit-input-placeholder { color: #999; }
一个可能的问题
build议的完整性检查 – 确保将form-control类添加到input。
如果你已经在你的页面上加载了引导CSS，但是你的input没有
class="form-control"则占位符CSSselect器将不适用于它们。
文档中的示例标记：
我知道这不适用于OP的标记，但由于我错过了这一点，花了一点努力试图debugging它，我发布这个答案来帮助别人。
我认为qwertzman是在正确的轨道上为这个最好的解决scheme。
如果你只想devise一个特定的占位符，那么他的答案仍然是正确的。
但是如果你想覆盖所有占位符的颜色（这是更可能的），如果你已经编译好自己的定制Bootstrap LESS，答案就更简单了！
覆盖这个LESSvariables： @input-color-placeholder
你应该看看这个答案： 改变一个HTML5input的占位符颜色与CSS
在大多数浏览器上工作，在这个线程的解决scheme是不是在FF 30 +的工作
使用LESS ，实际的mixin位于vendor-prefixes.less中
.placeholder(@color: @input-color-placeholder) { ... }
这个mixin在133行的forms中被调用：
.placeholder();
您的LESS解决scheme是：
.placeholder(#fff);
Imho是最好的select。 只要使用Winless或者Gulp / Grunt作品等composer php编译器，甚至更好/更快。
Boostrap占位符Mixin：
@mixin placeholder($color: $input-color-placeholder) { // Firefox &::-moz-placeholder { color: $color; opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526 } &:-ms-input-placeholder { color: $color; } // Internet Explorer 10+ &::-webkit-input-placeholder { color: $color; } // Safari and Chrome }
现在称之为：
@include placeholder($white);
Bootstrap有3行CSS，在您的bootstrap.css生成文件中控制占位符的文本颜色：
.form-control::-moz-placeholder { color: #999999; opacity: 1; } .form-control:-ms-input-placeholder { color: #999999; } .form-control::-webkit-input-placeholder { color: #999999; }
现在，如果您将其添加到您自己的CSS文件中，则不会覆盖引导程序，因为它不是特定的。 因此，在你的窗体里面添加一个你的CSS：
form .form-control::-moz-placeholder { color: #fff; opacity: 1; } form .form-control:-ms-input-placeholder { color: #fff; } form .form-control::-webkit-input-placeholder { color: #fff; }
瞧，将覆盖引导的CSS。
