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：部分）

如果您处于“怪癖”模式下，则会发现问题。托管项目就可以了。

解决方案：

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

选择要使用的模式需要一个触发器，并且该触发器在“文档类型切换”中找到。根据标准，任何（X）HTML文档都应具有一个doctype，该文档类型可以告诉全世界该文档使用的是（X）HTML哪种风格。

在标准化浪潮之前（或尽管如此）撰写的旧页面没有文档类型。因此，“无文档类型”表示怪异模式：根据旧规则显示。
相反，如果网络开发人员足够精通以包括 doctype，他可能知道自己在做什么。因此，大多数文档类型触发严格模式：根据纯标准显示。
任何新的或未知的文档类型都会触发严格模式。
问题是某些以怪癖模式编写的页面确实有 doctypes。因此，每个浏览器都有自己的文档类型列表，这些文档类型触发怪癖模式。请参阅此浏览器比较表以了解这些列表的概述。

Answer 2

问候！

我可以在Stack-Overflow上看到2个可以肯定解决您问题的主题：

Removing input background colour for Chrome autocomplete?

Override browser form-filling and input highlighting with HTML/CSS

它们非常完整和详细。

希望这可以帮助您！

在CSS

2 个答案:

要检查您是否处于怪异模式