如何阻止Input字段填充已保存数据时背景默认变为天蓝色？

浏览器会给自动填充的表单字段应用默认样式，这会直接覆盖你设置的红色背景，这就是输入已保存数据时背景变蓝的原因。要保留自动填充功能，同时阻止背景变色，只需用CSS覆盖浏览器的自动填充伪类样式即可：

具体实现步骤 #

在页面中添加一段自定义样式，针对不同浏览器的自动填充状态设置背景色：

/* 适配Chrome、Safari等WebKit内核浏览器 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  background-color: #f87171 !important; /* 对应Tailwind的bg-red-400颜色值 */
  -webkit-box-shadow: 0 0 0px 1000px #f87171 inset !important; /* 用内阴影彻底覆盖默认背景 */
  transition: background-color 5000s ease-in-out 0s; /* 延迟默认样式生效，避免瞬间闪蓝 */
}

/* 适配火狐浏览器 */
input:-moz-autofill,
input:-moz-autofill:hover,
input:-moz-autofill:focus {
  background-color: #f87171 !important;
  box-shadow: 0 0 0px 1000px #f87171 inset !important;
}

将这段样式整合到你的代码中，完整代码如下：

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

<style>
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  background-color: #f87171 !important;
  -webkit-box-shadow: 0 0 0px 1000px #f87171 inset !important;
  transition: background-color 5000s ease-in-out 0s;
}

input:-moz-autofill,
input:-moz-autofill:hover,
input:-moz-autofill:focus {
  background-color: #f87171 !important;
  box-shadow: 0 0 0px 1000px #f87171 inset !important;
}
</style>

<input name="title" id="title" type="text" placeholder="Enter a title here." class="focus:border-transparent focus:ring-0 ring-0 border-transparent focus:border-red-300 required:border-red-500 invalid:border-red-500 p-2 sm:p-4 w-full text-xl sm:text-2xl mt-2 shadow-md bg-red-400 placeholder-white transition-all">

关键说明 #

• #f87171是Tailwind中bg-red-400对应的十六进制颜色值，确保和初始背景色完全一致，保证视觉统一。
• 使用!important是为了强制覆盖浏览器的默认样式，内阴影则是双重保险，避免默认背景透出来。
• 过渡延迟的设置是为了防止自动填充瞬间出现蓝色背景，提升页面视觉流畅度。

内容的提问来源于stack exchange，提问作者Ali Mustafa