如何修改浏览器自动填充密码输入框的颜色？（React+TailwindCSS）

Firefox会对自动填充的表单控件应用默认样式（比如背景色、文本色），我们可以通过CSS伪类来覆盖这些默认样式，以下是适配你技术栈的两种解决方案：

方案1：自定义CSS直接覆盖 #

在你的自定义CSS文件中添加以下规则，兼容Firefox和其他webkit内核浏览器的自动填充样式：

/* 适配Chrome、Edge等webkit内核浏览器 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  background-color: var(--color-base-100) !important; /* 替换为输入框默认背景色 */
  color: var(--color-base-content/40) !important; /* 和你设置的文本色保持一致 */
  border-color: var(--color-base-border) !important; /* 保持边框颜色统一 */
  transition: background-color 5000s ease-in-out 0s; /* 防止浏览器强制重置背景色 */
}

/* 针对Firefox的自动填充样式 */
input:-moz-autofill,
input:-moz-autofill:hover,
input:-moz-autofill:focus {
  background-color: var(--color-base-100) !important;
  color: var(--color-base-content/40) !important;
  border-color: var(--color-base-border) !important;
}

请根据你的Tailwind配置，将var(--color-base-100)等变量替换为实际使用的颜色值（比如用#ffffff对应bg-white）。

方案2：Tailwind自定义变体（更贴合Tailwind风格） #

1. 先在tailwind.config.js中扩展autofill变体：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  variants: {
    extend: {
      backgroundColor: ['autofill'],
      textColor: ['autofill'],
      borderColor: ['autofill'],
    },
  },
  plugins: [],
}

2. 然后在输入框的className中直接添加自动填充对应的样式类：

<input 
  type= {showPassword ? "text" : "password"} 
  className='input input-bordered w-full pl-10 text-base-content/40 autofill:bg-base-100 autofill:text-base-content/40 autofill:border-base-content/20'
  placeholder='•••••••••••'
  value={formData.password}
  onChange={(e) => setFormData({ ...formData, password: e.target.value})}
/>

这样就能让自动填充后的样式和你自定义的输入框样式完全匹配。

注意事项 #

• Firefox的自动填充样式优先级较高，必要时可通过!important确保覆盖生效
• 使用Tailwind自定义颜色变量时，要保证autofill变体中使用的颜色和输入框默认样式一致

内容的提问来源于stack exchange，提问作者Luís Ulian