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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 16:35:50  来源:igfitidea点击:

Changing Background/Text Color of a Search Bar

htmlcsstwitter-bootstrap

提问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 */
}

JS Fiddle demo.

JS小提琴演示

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.

删除空间。