-webkit-autofill 在 Chrome 中不工作 IOS

Question

-webkit-autofill pseudo-class 在桌面上工作正常 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 触发和占位符转到顶部

但是这个伪class似乎在Chrome移动设备（IOS）

中不起作用

输入结构：

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

Answer 1

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

除非您仅以 Chrome 为目标（您可能是），否则转向另一个方向可能是明智的。 :-webkit-autofilll 不在任何标准轨道上，也不属于任何规范。需要考虑的事情。正如您的问题所指出的，您肯定会在不同的平台上获得截然不同的结果。

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

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

参见：

https://developer.mozilla.org/en-US/docs/Web/CSS/:-webkit-autofill

-webkit-autofill 在 Chrome 中不工作 IOS

-webkit-autofill is not working in Chrome for IOS

html

css

google-chrome

autofill

ios