-webkit-autofill 在 Chrome for IOS 中不起作用答案

【问题标题】：-webkit-autofill is not working in Chrome for IOS-webkit-autofill 在 Chrome for IOS 中不起作用
【发布时间】：2019-09-06 19:40:31
【问题描述】：

-webkit-autofill 伪类在桌面 Chrome 中工作正常，但在移动 Chrome (IOS) 中不起作用

我有一个自定义浮动占位符框架，我希望它支持 chrome 自动完成（在页面加载或对话框中填充表单）

所以我添加了这段代码：

 #{$all-text-inputs} {
      &:-webkit-autofill + #{$this}-placeholder {
        left: 0;
        right: 0 ;
        transform: translateY(-34px);
        @include text(big, $lh: 1.3em, $fw: fw(regular));
        opacity: 1;
      }
  }

这在 Chrome 桌面中按预期工作：-webkit-autofill 触发并占位符转到顶部

但似乎这个伪类在 Chrome Mobile (IOS) 中不起作用

输入结构：

<div class="input input-with-float-placeholder">
 <div class="input-inner">
  <input type="email">
  <span class="input-placeholder">Username</span>
 </div>
</div>

【问题讨论】：

标签： html ios css google-chrome autofill

【解决方案1】：

嗯。这是一个有趣的问题，因为 Chrome (Blink) 支持这个 webkit 功能而其他引擎不支持。

除非您只针对 Chrome（您可能是这样），否则换个方向可能是明智的。 :-webkit-autofilll 不在任何标准轨道上，也不属于任何规范。需要考虑的事情。正如您的问题所指出的那样，您可以保证在不同的平台上获得截然不同的结果。

此外，iOS 上的移动 Chrome 似乎使用 iOS 的 WKWebView**——它不支持这种非标准的 webkit 功能。我的理解是 WKWebView 仅支持 iOS Safari 可用的功能。（虽然 WKWebView API 的推出是 iOS 上第三方浏览器的一大进步，但它仍然是 != Chrome 的 Blink 渲染引擎。）

** 我认为这在过去几年没有改变，而您的经验表明它没有改变。

见：

【讨论】：

感谢正确的方向，会努力解决