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

【问题标题】：fail to change placeholder color with Bootstrap 3无法使用 Bootstrap 3 更改占位符颜色
【发布时间】：2014-01-13 10:48:19
【问题描述】：

两个问题：

我正在尝试将占位符文本设为白色。但它不起作用。我正在使用 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; }

【问题讨论】：

标签： css twitter-bootstrap-3 placeholder

【解决方案1】：

其他在我的情况下不起作用（引导程序 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，因为我们使用更高级别的 specificity 来定位 .form-control 元素（首先是 html 而不是 .form-control 首先）。

【讨论】：

【解决方案2】：

我正在使用 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*/

【讨论】：

【解决方案3】：

将占位符分配给类选择器，如下所示：

.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 并仅提供该类的输入，您可以控制样式的输入。

【讨论】：

这是一个非常简单的答案。其他人的小提琴演示：jsfiddle.net/ivawzh/G7mzL/11
你有什么想法为什么不能用逗号分隔所有这些吗？
@JohnMagnolia 这个答案解释了为什么你显然不能用逗号加入规则：stackoverflow.com/a/2610741

【解决方案4】：

Boostrap 占位符混合：

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

【讨论】：

【解决方案5】：

我认为 qwertzman 正在寻找最佳解决方案。

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

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

覆盖这个 LESS 变量： @input-color-placeholder

【讨论】：

【解决方案6】：

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

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

这个 mixin 在第 133 行的 forms.less 中被调用：

.placeholder();

您在 LESS 中的解决方案是：

.placeholder(#fff);

恕我直言，这是最好的方法。只需使用 Winless 或 Gulp/Grunt 之类的 Composer 编译器也可以，甚至更好/更快。

【讨论】：

【解决方案7】：

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 文件中，它不会覆盖引导程序，因为它不太具体。因此，在 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。

【讨论】：

【解决方案8】：

一个可能的陷阱

推荐的健全性检查 - 确保将 form-control 类添加到您的输入中。

如果您在页面上加载了引导 css，但您的输入没有
class="form-control"，则占位符 CSS 选择器将不适用于它们。

来自the docs 的示例标记：

我知道这不适用于 OP 的标记，但由于我一开始错过了这一点并花了一些精力尝试调试它，所以我发布此答案以帮助其他人。

【讨论】：

【解决方案9】：

这里发布了一个关于此的问题：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;
}

【讨论】：

【解决方案10】：

你应该看看这个答案：Change an HTML5 input's placeholder color with CSS

适用于大多数浏览器，例如，此线程中的解决方案不适用于 FF 30+

【讨论】：