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

Question

两个问题：

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

Answer 1

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

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

Answer 2

此处发布了一个问题：https://github.com/twbs/bootstrap/issues/14107

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

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

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

Answer 3

可能的问题

建议的完整性检查 - 务必将form-control课程添加到您的输入中。

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

来自the docs的示例标记：

我知道这并不适用于OP的标记，但是由于我最初错过了这个并花了一点努力尝试调试它，我发布这个答案来帮助其他人

Answer 4

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

Answer 5

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文件中，它就不会覆盖bootstrap，因为它不太具体。所以在你的表格中将你的表格添加到你的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将覆盖bootstrap的CSS。

Answer 6

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

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

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

重写此LESS变量： @input-color-placeholder

Answer 7

Boostrap占位符Mixin：

@include placeholder($white);

现在称之为：

%% first, compute the bounding box without rotation
centroid(1) = boundingBox.Pose.Position.X;
centroid(2) = boundingBox.Pose.Position.Y;
centroid(3) = boundingBox.Pose.Position.Z;
length = boundingBox.Scale.X;
width = boundingBox.Scale.Y;
height = boundingBox.Scale.Z;

obb(1,:) = length/2 * [0 1 0] - height/2 * [0 0 1] + width/2 * [1 0 0];
obb(2,:) = -length/2 * [0 1 0] - height/2 * [0 0 1]+ width/2 * [1 0 0];
obb(3,:) = -length/2 * [0 1 0] + height/2 * [0 0 1] + width/2 * [1 0 0];
obb(4,:) = length/2 * [0 1 0] + height/2 * [0 0 1] + width/2 * [1 0 0];
obb(5,:) = length/2 * [0 1 0] - height/2 * [0 0 1] - width/2 * [1 0 0];
obb(6,:) = -length/2 * [0 1 0] - height/2 * [0 0 1] - width/2 * [1 0 0];
obb(7,:) = -length/2 * [0 1 0] + height/2 * [0 0 1] - width/2 * [1 0 0];
obb(8,:) = length/2 * [0 1 0] + height/2 * [0 0 1] - width/2 * [1 0 0];

%% incorporate rotation
quat(1) = boundingBox.Pose.Orientation.W;
quat(2) = boundingBox.Pose.Orientation.X;
quat(3) = boundingBox.Pose.Orientation.Y;
quat(4) = boundingBox.Pose.Orientation.Z;
rotm = quat2rotm(quat);    
obb = (inv(rotm) * obb')';  % why inv?!

%% move to actual position
obb = bsxfun(@plus, obb, centroid);

Answer 8

您应该查看以下答案：Change an HTML5 input's placeholder color with CSS

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

Answer 9

LESS 实际mixin在vendor-prefixes.less

中

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

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

.placeholder();

您在LESS的解决方案是：

.placeholder(#fff);

Imho是最好的方式。只需使用Winless或像Gulp / Grunt这样的作曲家编译器，也可以更好/更快。

Answer 10

在我的情况下其他人均无效（引导程序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; }

这会覆盖引导程序CSS，因为我们使用高级specificity来定位.form-control元素。