告别烦恼：教你轻松去除 Chrome 自动填充的恼人黄色背景

2023-12-08 04:06:42

前言

Google Chrome 的自动填充功能是一个非常方便的工具，它可以自动填充表格中的信息，例如姓名、地址、电话号码等，从而节省了我们手动输入的时间。但是，有些用户可能不喜欢自动填充功能中醒目的黄色背景，觉得它过于刺眼或分散注意力。本文将介绍几种方法，帮助您轻松去除黄色背景，自定义颜色，打造赏心悦目的填充体验。

方法一：使用 CSS 样式覆盖黄色背景

这种方法非常简单，只需在网页中添加一段 CSS 样式即可。具体步骤如下：

打开需要去除黄色背景的网页。
右键单击该网页中的任意位置，选择“检查元素”选项。
在打开的开发人员工具窗口中，找到负责自动填充样式的 CSS 规则。通常情况下，该规则位于 <style> 标签或 <head> 标签中。
将以下 CSS 代码添加到该规则中：

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px white inset;
}

保存更改并刷新网页。黄色背景将被白色背景覆盖。

方法二：使用浏览器扩展去除黄色背景

如果您不想手动修改 CSS 样式，也可以使用浏览器扩展来去除黄色背景。目前，有多种浏览器扩展可以实现此目的，例如：

这些扩展的使用方法非常简单，只需将其安装到浏览器中，然后启用即可。

方法三：使用脚本去除黄色背景

如果您熟悉 JavaScript，也可以使用脚本来去除黄色背景。具体步骤如下：

打开需要去除黄色背景的网页。
在浏览器的控制台中，输入以下脚本：

var inputs = document.querySelectorAll('input[type=text], input[type=password], textarea');
for (var i = 0; i < inputs.length; i++) {
  inputs[i].style.backgroundColor = 'white';
}