如何去除ms edge中input的边框和背景

Question

当带有 suggestion texts 的下拉菜单打开输入悬停时出现。
设置焦点、活动、悬停样式无济于事。好像已经用完了 DOM。
如何在 Edge 中去除输入文本的边框和背景？

更新

如果没有 css 解决方案，任何人都可以通过 link 文章 and/or 回答我并提供 javascript 解决方法（我希望它像 google.com 搜索输入中那样）。

Answer 1

最好关掉autocomplete

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

Answer 2

根据对的回答，正如您自己怀疑的那样，出现在文本框下方的自动完成列表不在 DOM 范围内，因此无法成为 CSS 的目标.

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

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

在查看 my second demo on codepen（显然是在 Edge 中）时，这一点值得注意，它已打开自动完成功能。当您单击文本框时，背景颜色为红色（正如预期的那样 - 我将鼠标悬停在焦点对准的文本框上）。但是，稍微移动鼠标，背景变为蓝色，表示文本框处于活动状态但不再悬停。这是不正确的 - 我们仍在徘徊。

这可能是 Edge 的一个怪癖，或者是浏览器处理自动完成方式的错误。可能值得向 Microsoft 提出 - 在他们的 issue tracker.

上似乎没有列出任何与此相关的内容

我提供的第一个 link 中给出的答案之一建议使用 jQueryUI's implementation of autocomplete。当浏览器默认执行时，这有点麻烦，但您将能够针对自动完成列表的样式，并且在理论上避免您遇到的问题。

Answer 3

您必须在 input 字段中添加 autocomplete="off"

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

和

如果它是一个动态元素，或者您不能在 input 中添加它，那么您可以使用一个简单的脚本来完成此操作

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

This 对你有用

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">

如何去除ms edge中input的边框和背景

How to remove border and background of input in ms edge

html

css

microsoft-edge