无法使用Bootstrap 3更改占位符颜色

两个问题：

1. 我正在尝试将占位符文本设置为白色。但这是行不通的。我正在使用Bootstrap 3。JSFiddle demo

2. 另一个问题是如何不全局更改占位符颜色。也就是说，我有多个字段，我只希望一个字段具有白色占位符，其他所有字段均保持默认颜色。

提前致谢。

的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选择器，则CSS选择器将不适用于它们。

来自docs的示例标记：

我知道这不适用于OP的标记，但是由于我刚开始错过此标记并花了点力气对其进行调试，因此我将发布此答案以帮助其他人。

我正在使用Bootstrap 4，但Dennis Puzak的解决方案对我不起作用。

下一个解决方案对我有用

.form-control::placeholder { color: white;} /* Chrome, Firefox, Opera*/
:-ms-input-placeholder.form-control { color: white; }  /* Internet Explorer*/
.form-control::-ms-input-placeholder { color: white; }  /* Microsoft Edge*/

Bootstrap在bootstrap.css生成的文件中控制占位符文本颜色的3行CSS：

.form-control::-moz-placeholder {
  color: #999999;
  opacity: 1;
}
.form-control:-ms-input-placeholder {
  color: #999999;
}
.form-control::-webkit-input-placeholder {
  color: #999999;
}

现在，如果将其添加到自己的CSS文件中，它将不会覆盖自举程序，因为它的具体程度较低。因此，将您的表单组装到a中，然后将其添加到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。

我认为qwertzman朝着正确的方向寻求最佳解决方案。

如果您只想设置特定占位符的样式，那么他的答案仍然适用。

但是，如果您想覆盖所有占位符的颜色（更有可能），并且已经在编译自己的自定义Bootstrap LESS，那么答案就更简单了！

覆盖此LESS变量： @input-color-placeholder

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

您应该查看以下答案：使用CSS更改HTML5输入的占位符颜色

在大多数浏览器上均可使用，例如，该线程中的解决方案不适用于FF 30+

使用LESS时，实际的mixin位于vendor-prefixes.less中

.placeholder(@color: @input-color-placeholder) {
...
}

在第133行，在forms.less中调用此mixin：

.placeholder();

您在LESS中的解决方案是：

.placeholder(#fff);

恕我直言，最好的方法。只需使用Winless或类似Gulp / Grunt的作曲家编译器，效果也将更好/更快。

在我的情况下，其他的则不起作用（引导程序4）。这是我使用的解决方案。

html .form-control::-webkit-input-placeholder { color:white; }
html .form-control:-moz-placeholder { color:white; }
html .form-control::-moz-placeholder { color:white; }
html .form-control:-ms-input-placeholder { color:white; }

如果我们使用更强大的选择器（html首先），则不需要使用hacky值!important。

这将覆盖引导CSS，因为我们使用更高级别的特异性来定位.form-control元素（html第一个而不是.form-control第一个）。