无法使用Bootstrap 3更改占位符颜色
无法使用Bootstrap 3更改占位符颜色
提问于 2013-12-25 22:15:57
两个问题：
- 我正在尝试将占位符文本变为白色。但它不起作用。我使用的是Bootstrap 3。
- Another的问题是如何改变占位符的颜色而不是全局的。也就是说，我有多个字段，我希望只有一个字段具有白色占位符，所有其他字段保持默认颜色。
提前谢谢。
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; } 回答 10
Stack Overflow用户
回答已采纳
发布于 2013-12-25 22:59:51
将占位符分配给类选择器，如下所示：
.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 */它将工作，因为一个更强大的选择器可能正在覆盖您的全局。我在平板电脑上，所以我不能检查和确认它是哪个更强大的选择器:)但它确实起作用了，我在你的小提琴上试过了。
这也回答了你的第二个问题。通过将其分配给一个class或id，并仅提供该类的输入，您可以控制要设置样式的输入。
Stack Overflow用户
发布于 2014-08-13 08:26:46
这里有一期关于这方面的文章：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;
}Stack Overflow用户
发布于 2015-06-12 07:40:22
一个可能的Gotcha
推荐的健全性检查-确保将form-control类添加到您的输入中。
如果页面上加载了bootstrap css，但您的输入没有
class="form-control"，那么占位符CSS选择器将不会应用于它们。
来自the docs的示例标记
我知道这不适用于OP的标记，但由于我一开始错过了这一点，并花费了一些精力试图对其进行调试，因此我将此答案张贴出来以帮助其他人。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20773665
复制相关文章
相似问题