今天昨天收到一个修改任务，在Safari中输入框会出现自带的钥匙🔑图标和人头图标...而且很奇葩的是同样的代码，不同的地方有的地方不会出现这样的图标，其他环境同样的地方的输入框又没有出现这种图标！这样很是影响用户体验
image.png
image.png
image.png
这个autoComplete是为off的,貌似好像也没啥用。
在网上查了下，浏览器会生成一段div表示这个小图标，那么通过css就可以隐藏这个小图标了
input{
&::-webkit-credentials-auto-fill-button {
display: none !important;
visibility: hidden;
pointer-events: none;
position: absolute;
right: 0;
}
&:focus::-webkit-contacts-auto-fill-button{
opacity: 0;
}
}
那么为何要这么做呢？
在网上百度了很多都是贴了这一段代码，但是在审查元素的时候却查找不到该元素的存在。
究其原因，我们需要稍微了解下什么是 Shadow DOM，简单点来说：
Shadow DOM 允许在 document 渲染时插入一个 DOM 元素子树，但是这课子树并不在主 DOM 树中。开发者可以利用 Shadow DOM 封装自己的 HTML 标签、CSS 样式和 JavaScript 代码。
典型的例子就是<video>，在html中只需要敲video标签，渲染到页面后，会出现播放图标，进度条，声音控制这些图标出来，以下就是打开Shadow DOM之后看到的样子。
image.png
Safari中打开Shadow DOM方法：
image.png
然后加上先前的css样式隐藏掉就好了!大功告成！
