如何删除ms边缘输入的边框和背景

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');

This对您有用

Answer 2

根据this similar question on SO给出的答案，正如您所怀疑的那样，文本框下方显示的自动填充列表不在DOM中，因此无法通过CSS进行定位。

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

My first demo on codepen显示关闭自动填充功能时样式会发生什么。您将通过链接:hover和:focus伪类来看到，当将鼠标悬停在已经处于焦点的文本框上时，我可以创建不同的样式（焦点时为蓝色，当悬停在同一文本框上时为红色）当它聚焦时。）

在查看启用了自动完成功能的my second demo on codepen（显然是Edge）时，值得注意。当您单击文本框时，背景颜色为红色（正如预期的那样 - 我将鼠标悬停在焦点对齐的文本框上）。但是，稍微移动鼠标并将背景更改为蓝色，表示文本框处于活动状态但不再悬停。这是不对的 - 我们仍然在它上面盘旋。

这可能是Edge的怪癖，或浏览器如何处理自动完成的错误。可能值得与微软一起筹集 - 在issue tracker上似乎没有列出任何相关内容。

我提供的第一个链接中给出的答案之一建议使用jQueryUI's implementation of autocomplete。默认情况下浏览器应该这样做有点不对劲，但是你可以定位自动完成列表的样式，理论上可以避免你遇到的问题。

Answer 3

最好关闭autocomplete

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

Answer 4

我还没有测试过，我现在无法访问IE，但在其他浏览器中，可以使用某些CSS更新某些默认行为。希望它可以帮到你：

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

Answer 5

只需在你的 css 中添加 outline: none; 就可以了！

CSS：

input { 
   outline: none;
}

HTML：

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