在css中更改输入搜索表单的背景颜色答案

【问题标题】：changing the background color of an input search form in css在css中更改输入搜索表单的背景颜色
【发布时间】：2018-07-25 14:02:28
【问题描述】：

我正在处理website，其中输入搜索表单中的背景颜色变为黄色，如下所示，同时从第一个输入搜索栏中的搜索项目历史中选择任何项目占位符what are you looking for..

HTML：

我用来制作上述输入搜索栏的 HTML 代码是：

<div class="input-searchicon">
   <input class="form-control search_ruckify mb-4" type="text" name="filter[keywords][keywords]"
      placeholder="what are you looking for..." required>
   <span class="fa fa-search searchicon" aria-hidden="true "></span>
</div>

CSS：

.input-searchicon input
{
text-align: center;
}

问题陈述：

我想知道我需要添加哪些 CSS 代码，以便在从搜索项目的历史记录中选择项目时，没有黄色背景颜色。

【问题讨论】：

我怀疑这是 Chrome 的问题，如果是这种情况，你不能。

标签： html css forms focus stylesheet

【解决方案1】：

检查您是否处于怪癖模式

在 Firefox 和 Opera 中，您可以通过检查页面信息来确定您的浏览器是否处于“怪癖模式”。

使用document.compatMode，将告诉您大多数浏览器所处的模式。

在 Chrome、Safari 和 IE 中，在地址栏中运行此 javascript：

javascript:window.alert('You are in ' + (document.compatMode==='CSS1Compat'?'Standards':'Quirks') + ' mode.')

（请注意，由于最近的安全更改，您需要在粘贴到地址栏后重新键入 javascript: 部分）

如果您处于 Quirk 模式，则会发现问题。托管项目就可以了。

解决方案：

换句话说，所有浏览器都需要两种模式：旧规则的怪癖模式和标准的严格模式。 IE Mac 是第一个实现这两种模式的浏览器，IE Windows 6、Mozilla、Safari 和 Opera 紧随其后。 IE 5 Windows 以及像 Netscape 4 这样的旧版浏览器被永久锁定在 quirks 模式。

选择使用哪种模式需要一个触发器，这个触发器在“doctype切换”中找到。根据标准，任何 (X)HTML 文档都应该有一个 doctype，它可以告诉全世界该文档正在使用哪种 (X)HTML 风格。

在标准化浪潮之前（或尽管如此）编写的旧页面没有文档类型。因此“no doctype”意味着怪癖模式：按照旧规则展示。
相反，如果 Web 开发人员足够精明，可以包含 doctype，他可能知道自己在做什么。因此大多数文档类型触发严格模式：按照纯标准显示。
任何新的或未知的文档类型都会触发严格模式。
问题是某些以 quirks 模式编写的页面确实有文档类型。因此，每个浏览器都有自己的文档类型列表触发怪癖模式。请参阅此浏览器比较图表以获取这些列表的概述。

【讨论】：