twitter-bootstrap 更改搜索栏的背景/文本颜色
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/15297254/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing Background/Text Color of a Search Bar
提问by user1427661
I have a search bar in my navigation bar (using Bootstrap):
我的导航栏中有一个搜索栏(使用 Bootstrap):
<li>
<form class="navbar-search pull-right">
<input type="text" class="search-query offset1" placeholder="Search">
</form>
</li>
I want to change the default background color and text color, so I've implemented the following CSS:
我想更改默认背景颜色和文本颜色,因此我实现了以下 CSS:
input .search-query {
background-color:#f47443;
color:white;
}
Yet the colors remain the same -- black and white. Is there something special about form/input background colors and font colors that I'm missing?
然而颜色保持不变——黑色和白色。我缺少的表单/输入背景颜色和字体颜色有什么特别之处吗?
回答by David says reinstate Monica
You want:
你要:
input.search-query {
/* css */
}
Without the space it selects an inputelement with a class of search-query; witha space separating the terms inputand .search-querythe browser is looking inside the inputelement for a descendantelement with the search-queryclass.
如果没有空格,它会选择input一个类为search-query;的元素。用空格分隔术语input,.search-query浏览器正在input元素内部查找具有该类的后代元素search-query。
Incidentally, the selector as you wrote it:
顺便说一句,您编写的选择器:
input .search-query {
/* css */
}
could nevermatch any element, since an input(as are imgelements) void elements in that they cannot contain descendant elements or even text.
也从未与任何元素,因为一个input(因为是img元素),因为它们不能包含子元素,甚至文本无效元素。
References:
参考:
回答by ZloyPotroh
input .search-query {
background-color:#f47443;
color:white;
}
>
>
input.search-query {
background-color:#f47443;
color:white;
}
Remove space.
删除空间。

