如何删除输入（Safari）电子邮件和密码中保存的建议框？

Question

输入右侧有一个带有按键的烦人框，无法在 safari 中将其删除。请帮助。 您可以查看图像并明白要点。

        <div>
          <label for="email">email:</label>
          <input
            name="email"
            id="user-email"
            autofocus
            required
            type="email"
            autocomplete="new-email" />
        </div>
        <div>
          <label for="password">password:</label>
          <input
            name="password"
            id="user-password"
            required
            minlength="8"
            type="password"
            autocomplete="off" />
        </div>

尝试过 autocomplete="new-email" ； autocomplete="off"，但它处理的事情与我想要的不同。

Answer 1

我认为你想要的是覆盖 Shadow dom 中定义的样式

例如

input::-webkit-credentials-auto-fill-button {
background-image: url("data:image/svg+xml,%3Csvg xmlns%3D\"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg\" …2.467 2.521c.171.171.36.256.565.256z\" opacity%3D\".75\"%2F%3E%3C%2Fsvg%3E");
width: 24px;
height: 24px;
margin-left: 2px;
margin-right: 1px;
mix-blend-mode: luminosity;
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
-webkit-user-select: none;
}

更多信息请点击此处。

覆盖影子根元素中的样式

另外，在我的例子中，内联样式的应用取决于焦点，例如

display: block !important;

和

display: none !important;

如果您只是想隐藏它，它使用

!important

的事实使得覆盖它变得有点棘手。

我的感觉是 safari 根据上下文添加这些值，即如果文本输入在同一字段集中添加密码，则它假定它是用户名，并添加图标以允许您填写钥匙链或类似内容。