如何去除ms Edge中输入的边框和背景

Question

当使用

suggestion texts

打开下拉菜单并将输入悬停时，会出现此情况。
设置焦点、活动、悬停样式没有帮助。看起来它已经脱离了 DOM。
如何在 Edge 中删除输入文本的边框和背景？

更新

如果没有 css 解决方案，任何人都可以通过指向 how-it-works-article 的链接来回答我和/或为我提供一个 javascript 解决方法（我希望它像 google.com 搜索输入一样）。

Answer 1

您必须在

autocomplete="off"

字段中添加

input

<input type="text" placeholder="Type here" autocomplete="off">

还有

如果它是动态元素或者您无法将其添加到您的

input

中，那么您可以使用简单的脚本来完成此操作

$('input').attr('autocomplete','off');

这对你有用

Answer 2

从对 SO 上的类似问题的回答来看，正如您自己所怀疑的那样，出现在文本框下方的自动完成列表不在 DOM 之外，因此 CSS 无法定位。

从我在 codepen 上的实验来看，Edge 似乎在文本框上覆盖了一个半透明元素（高度和宽度都匹配），而不是将样式应用于文本框本身。

我在 codepen 上的第一个演示展示了关闭自动完成功能时样式会发生什么情况。您将看到，通过链接 :hover

 和 

:focus

 伪类，当将鼠标悬停在已经处于焦点中的文本框上时，我可以创建不同的样式（焦点中时为蓝色，当鼠标悬停在同一文本框上时为红色）聚焦）。

在查看

我在 codepen 上的第二个演示（显然是在 Edge 中）时值得注意，它已打开自动完成功能。当您单击文本框时，背景颜色为红色（正如预期的那样 - 我将鼠标悬停在焦点所在的文本框上）。但是，稍微移动鼠标，背景会变为蓝色，表示文本框处于活动状态，但不再悬停在其上。这是不正确的 - 我们仍然徘徊在它上面。 这可能是 Edge 的一个怪癖，或者是浏览器处理自动完成方式的错误。这可能值得向 Microsoft 提出 - 在他们的

问题跟踪器

上似乎没有列出任何与此相关的内容。 我提供的第一个链接中给出的答案之一建议使用

jQueryUI 的自动完成实现

。当浏览器默认执行此操作时，这有点麻烦，但您将能够定位自动完成列表的样式，并且理论上可以避免您遇到的问题。

Answer 3

autocomplete

<input type="text" placeholder="Type here" autocomplete="off">

Answer 4

outline: none;

就可以了！

CSS

：

input { 
   outline: none;
}

或

HTML

： <input style="outline: none;" type="text" id="lname" name="lname">

Answer 5

appearance: none;
-webkit-appearance: none;
-moz-appearance: none;