如何去掉Safari输入框右侧影响美观的小图标

今天昨天收到一个修改任务，在Safari中输入框会出现自带的钥匙🔑图标和人头图标...而且很奇葩的是同样的代码，不同的地方有的地方不会出现这样的图标，其他环境同样的地方的输入框又没有出现这种图标！这样很是影响用户体验

image.png image.png 思来想去，这种图标应该是用户密码自动填充功能，是浏览器的自发行为，查找input上的属性 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样式隐藏掉就好了!大功告成！