React站点：iOS密码管理器高亮密码框时如何修改文本颜色？

我有一个React站点，登录/注册的密码字段默认文本颜色为白色。当iOS密码管理器对注册密码字段给出密码建议时，会将该字段高亮为黄色，此时白色的密码文本难以辨认。

我了解到阻止黄色高亮的唯一方法是将字段类型改为one-time password，或禁用autofill，但这两种方式都会破坏密码管理器干预等正常密码字段行为，并不理想。

是否有办法仅在iOS密码管理器接管该字段时修改文本字段的字体颜色？或者是否有其他方法，既能在多数场景下保留白色文本颜色，又能在iOS强制显示黄色背景（密码管理器介入时）让文本更易读？

当前字段代码：

<input aria-invalid="false" autocomplete="current-password" id="password" name="password" required="" type="password" class="MuiInputBase-input MuiOutlinedInput-input css-h4os0j" value="">

可行解决方案 #

1. 利用WebKit自动填充伪类针对性修改样式 #

iOS Safari会给自动填充的表单字段添加:-webkit-autofill伪类，我们可以通过这个伪类专门修改文本颜色，不影响正常状态：

/* 仅对自动填充的密码字段生效 */
input[type="password"]:-webkit-autofill {
  -webkit-text-fill-color: #000 !important; /* 设置为深色，比如黑色，确保在黄色背景上清晰 */
  /* 可选：若需要微调背景色，可添加以下代码，但不建议完全覆盖黄色，避免破坏密码管理器的提示逻辑 */
  /* -webkit-box-shadow: 0 0 0 1000px rgba(255,255,0,0.8) inset !important; */
}

-webkit-text-fill-color是WebKit内核的私有属性，专门用于覆盖自动填充时的文本颜色，加上!important可以确保优先级足够，覆盖默认样式。

2. 结合MUI组件的自定义样式（适配你的场景） #

因为你使用了MUI的输入组件，可以直接通过sx属性注入上述样式，无需额外CSS文件：

import TextField from '@mui/material/TextField';

// 在组件中使用
<TextField
  id="password"
  name="password"
  type="password"
  required
  autocomplete="current-password"
  sx={{
    '& input:-webkit-autofill': {
      WebkitTextFillColor: '#000',
    },
  }}
  // 其他属性...
/>

3. 备选方案：调整背景色透明度（效果较弱） #

如果不想修改文本颜色，也可以给自动填充的黄色背景添加透明度，让白色文本相对清晰，但这种方法的可读性提升不如修改文本颜色直接：

input[type="password"]:-webkit-autofill {
  background-color: rgba(255, 255, 0, 0.7) !important;
}

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