两个问题:
我正在尝试将占位符文本设为白色。但它不起作用。我正在使用 Bootstrap 3。
JSFiddle demo
另一个问题是如何不全局更改占位符颜色。也就是说,我有多个字段,我只希望一个字段有白色占位符,所有其他字段保持默认颜色。
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; }
最佳答案
像这样将占位符分配给类选择器:
.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 */
它将起作用,因为更强大的选择器可能会覆盖您的全局选择器。我在平板电脑上,所以我无法检查和确认它是哪个更强大的选择器:)但它确实有效我在你的 fiddle 中试过了。
这也回答了你的第二个问题。通过将它分配给一个类或 id 并仅提供该类的输入,您可以控制样式的输入。
关于css - 无法使用 Bootstrap 3 更改占位符颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20773665/