我有一个 React 网站,其中登录/注册密码字段的正常文本颜色是白色。
当 iOS 密码管理器为注册密码字段提供密码建议时,它会将该字段突出显示为黄色,并且白色密码文本难以阅读。
据我所知,防止黄色突出显示的唯一方法是将字段类型更改为“一次性密码”,或者禁用自动填充,这两种方法都会破坏正常的密码字段行为,例如密码管理器干预,这是不好。
有没有办法有选择地更改文本字段中的字体颜色,即仅当 iOS 密码管理器接管该框时?或者是否有另一种方法可以在大多数情况下保持正常的白色文本颜色,但在 iOS 管理密码时强制使用黄色背景时使其更清晰?
编辑:有人要求提供代码 - 这是当前字段
<input aria-invalid="false" autocomplete="current-password" id="password" name="password" required="" type="password" class="MuiInputBase-input MuiOutlinedInput-input css-h4os0j" value="">
我不相信这是可能做到的。我遇到了同样的问题。我能够使用 Safari -> iOS Web Inspector 检查页面。它似乎与 iOS 18 中提供的“密码”应用程序有关。虽然我能够使用此 css 选择器更改背景颜色,但无法更改颜色。检查员将表明它显然尊重我的 CSS,但因为它位于影子内容(用户代理)中,所以它不会尊重您的样式。
input:autofill, input:-webkit-autofill-strong-password, input:-webkit-autofill-strong-password-viewable, input:-webkit-autofill-and-obscured {
-webkit-box-shadow: inset 0 0 0px 9999px black !important;
background-color:black !important;
color:white !important;
}