背景:

表单输入框在Safari浏览器下面出现了自动填充名称的小图标,导致样式变现怪异。

审查元素可以看到的是Safari根据自身自动填充规则追加了Shadow pseudo元素,就是伪元素(对比伪类理解)。

最直接的解决思路是那么我们直接把自动填充关掉autocomplete=”off”,显然这里不是用户名不是密码出现了自动填充,而且填充项的名称还包含一个contacts联系人。事情就没这么简单了。

考虑到联系人信息自动填充在目前业务中不会涉及,所以对这个样式做下处理就可以了。参考【Safari – Webkit contacts autofill button icon change color on empty

// 查找对非webkit自动填充样式了的input元素的填充联系人的伪类input:not(input:-webkit-autofill)::-webkit-contacts-auto-fill-button {    background-color: #fff;}

效果:成功

深入排查问题机制。


自动填充的机制

首先自动填充这件事情是浏览器做掉的。关于为什么自动填充,以及自动填充对于填充场景的识别这里有篇文章可以看下:Autofill: What web devs should know, but don’t (英文的,有中文的可以推荐下)。

里面提到了WHATWG()对表单组件的一个指导意见:Form control infrastructure,主要关注 4.10.18.7 Autofill 自动填充着一部分。当启用autocomplete时候,可以根据Field name来参考为用户提供什么样的填充类型。里面提到50多种名称数据。剩下的看浏览器自己的实现-_-。

注意到其中一项 family-name 命中类型:Text,注释中讲到包括像不同地区会有last name、surname,见下图。

猜测是这里的输入框name=”lastTime”命中了Safari的规则,准确的说是lastXXX,加了个<input name=”lastHello” />,然后观察结果,完美复现。

其他

:auto-fill指的是这个

参考内容整理