无法使用Bootstrap 3更改占位符颜色 [英] fail to change placeholder color with Bootstrap 3
问题描述
两个问题:
-
我试图使占位符文本为白色。但它不工作。我使用Bootstrap 3.
JSFiddle演示
另一个问题是如何在全局范围内更改占位符颜色。也就是说,我有多个字段,我只想要一个字段有白色占位符,所有其他字段保持默认颜色。
Another question is how do I change placeholder color not globally. That is, I have multiple fields, I want only one field to have white placeholder, all the others remain in default color.
提前感谢。
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; }
推荐答案
将占位符分配给类选择器,
Assign the placeholder to a class selector like this:
.form-control::-webkit-input-placeholder { color: white; }
.form-control:-moz-placeholder { color: white; }
.form-control::-moz-placeholder { color: white; }
.form-control:-ms-input-placeholder { color: white; }
这将工作,因为一个更强的选择器可能覆盖你的全局。我在一个平板电脑,所以我不能检查和确认哪个更强的选择器它是:)但它的工作我尝试它在你的小提琴。
It will work then since a stronger selector was probably overriding your global. I'm on a tablet so i cant inspect and confirm which stronger selector it was :) But it does work I tried it in your fiddle.
这也回答了你的第二题。通过将它分配给一个类或id,并且只给该类提供一个输入,你可以控制什么样的输入。
This also answers your second question. By assigning it to a class or id and giving an input only that class you can control what inputs to style.
这篇关于无法使用Bootstrap 3更改占位符颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!