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

Question

我正在研究 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 代码，以便在从搜索的元素历史记录中选择一个元素时，没有黄色背景色。

Answer 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 紧随其后。 Windows IE 5 以及旧版浏览器(如 Netscape 4)永久锁定在怪异模式。

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

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