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

fail to change placeholder color with Bootstrap 3

提问by Ivan Wang

Two questions:

两个问题：

1. I am trying to make the placeholder text white. But it doesn't work. I am using Bootstrap 3. JSFiddle demo

2. Another question is how do I change placeholder color not globally. That is, I have multiple fields, I want only one field to have white placeholder, all the others remain in default color.

1. 我正在尝试将占位符文本设为白色。但它不起作用。我正在使用 Bootstrap 3。JSFiddle demo

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

Thanks in advance.

提前致谢。

html:

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:

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

回答by Dennis Puzak

Assign the placeholder to a class selector like this:

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

.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 */

It will work then since a stronger selector was probably overriding your global. I'm on a tablet so i cant inspect and confirm which stronger selector it was :) But it does work I tried it in your fiddle.

它将起作用，因为更强大的选择器可能会覆盖您的全局。我在平板电脑上，所以我无法检查和确认它是哪个更强的选择器:) 但它确实有效，我在你的小提琴中试过了。

This also answers your second question. By assigning it to a class or id and giving an input only that class you can control what inputs to style.

这也回答了你的第二个问题。通过将其分配给一个类或 id 并仅提供该类的输入，您可以控制样式的输入。

回答by mlunoe

There was an issue posted here about this: https://github.com/twbs/bootstrap/issues/14107

这里发布了一个关于此的问题：https: //github.com/twbs/bootstrap/issues/14107

The issue was solved by this commit: https://github.com/twbs/bootstrap/commit/bd292ca3b89da982abf34473318c77ace3417fb5

这个提交解决了这个问题：https: //github.com/twbs/bootstrap/commit/bd292ca3b89da982abf34473318c77ace3417fb5

The solution therefore is to override it back to #999and not whiteas suggested (and also overriding all bootstraps styles, not just for webkit-styles):

因此，解决方案是将其覆盖回#999而不是white按照建议（并且还覆盖所有引导程序样式，而不仅仅是 webkit 样式）：

.form-control::-moz-placeholder {
  color: #999;
}
.form-control:-ms-input-placeholder {
  color: #999;
}
.form-control::-webkit-input-placeholder {
  color: #999;
}

回答by cwd

A Possible Gotcha

一个可能的陷阱

Recommended Sanity Check- Make sure to add the form-controlclass to your inputs.

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

If you have bootstrap css loaded on your page, but your inputs don't have the
class="form-control"then placeholder CSS selector won't apply to them.

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

Example markup from the docs:

文档中的示例标记：

I know this didn't apply to the OP's markup but as I missed this at first and spent a little bit of effort trying to debug it, I'm posting this answer to help others.

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

回答by Oleksandr Potomkin

I'm using Bootstrap 4 and Dennis Puzak's solution does not work for me.

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

The next solution works for me

下一个解决方案对我有用

.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*/

回答by rhysclay

Bootstrap has 3 lines of CSS, within your bootstrap.css generated file that control the placeholder text color:

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

Now if you add this to your own CSS file it won't override bootstrap's because it is less specific. So assmuning your form inside a then add that to your CSS:

现在，如果您将它添加到您自己的 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;
}

Voila that will override bootstrap's CSS.

瞧，这将覆盖引导程序的 CSS。

回答by D. Starr

I think qwertzman is on the right track for the best solution to this.

我认为 qwertzman 正处于最佳解决方案的正确轨道上。

If you only wanted to style a specific placeholder, then his answer still holds true.

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

But if you want to override the colour of allplaceholders, (which is more probable) and if you are already compiling your own custom Bootstrap LESS, the answer is even simpler!

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

Override this LESS variable: @input-color-placeholder

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

回答by ?ikrant Giri

Boostrap Placeholder Mixin:

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
}

now call it:

现在称之为：

@include placeholder($white);

回答by Hugo Gresse

You should check out this answer : Change an HTML5 input's placeholder color with CSS

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

Work on most browser, the solution in this thread is not working on FF 30+ for example

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

回答by qwertzman

With LESSthe actual mixin is in vendor-prefixes.less

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

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

This mixin is called in forms.less on line 133:

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

.placeholder();

Your solution in LESS is:

您在 LESS 中的解决方案是：

.placeholder(#fff);

Imho the best way to go. Just use Winless or a composer compiler like Gulp/Grunt works, too and even better/faster.

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

回答by Nick4814

The others did not work in my case (Bootstrap 4). Here is the solution I used.

其他在我的情况下不起作用（Bootstrap 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; }

If we use a stronger selector (htmlfirst), we don't need to use the hacky value !important.

如果我们使用更强的选择器（html第一个），我们就不需要使用 hacky value !important。

This overrides bootstraps CSS as we use a higher level of specificityto target .form-control elements (htmlfirst instead of .form-controlfirst).

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