两个问题:
提前谢谢。
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; }
发布于 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,并仅提供该类的输入,您可以控制要设置样式的输入。
发布于 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;
}
发布于 2015-06-12 07:40:22
一个可能的Gotcha
推荐的健全性检查-确保将form-control
类添加到您的输入中。
如果页面上加载了bootstrap css,但您的输入没有
class="form-control"
,那么占位符CSS选择器将不会应用于它们。
来自the docs的示例标记
我知道这不适用于OP的标记,但由于我一开始错过了这一点,并花费了一些精力试图对其进行调试,因此我将此答案张贴出来以帮助其他人。
https://stackoverflow.com/questions/20773665
复制相似问题