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

Question

问

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

教坏的黑天使_203 发布于 2023-02-08 11:01

两个问题:

我试图使占位符文本变白.但它不起作用.我正在使用Bootstrap 3.JSFiddle demo

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

提前致谢.

HTML:

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

Dennis Puzak.. 180

将占位符分配给类选择器,如下所示:

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

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并仅为该类提供输入,您可以控制样式的输入.
2023-02-08 11:02 回答

我是来工作的程_586
可能的问题

建议的完整性检查 - 确保将form-control类添加到输入中.

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

来自文档的示例标记:

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

2023-02-08 11:02 回答

看人生愤怒
这里有一个问题: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;
}
```
2023-02-08 11:04 回答

撰写答案

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

可能的问题