如何在微软 Edge 中去除输入框的边框和背景？

Question

当带有建议文本下拉菜单打开时，输入框会显示。
设置焦点、激活和悬停样式没有效果。看起来它已经超出了DOM。
如何在Edge中去除输入文本的边框和背景？

更新

如果没有CSS解决方案，是否可以提供一个how-it-works-article的链接和/或提供一个JavaScript解决方案（我希望它像google.com搜索输入一样）。

- g1un

---

你能分享一下你的 HTML 和 CSS 代码片段吗？ - Alexander

请提供fiddle或HTML代码 - Ismail Farooq

Answer 1

您需要在您的input字段中添加autocomplete="off"。

<input type="text" placeholder="在此处输入" autocomplete="off">

并且

如果它是一个动态元素，或者您无法在input中添加这个属性，那么您可以使用一个简单的脚本来实现。

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

这篇文章对您可能会有用。

- Mukul Kant

Answer 2

根据此类似问题在SO上的答案，正如您自己怀疑的那样，出现在文本框下方的自动完成列表不在DOM中，因此无法被CSS定位。

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

我的第一个codepen演示展示了关闭自动完成时的样式情况。您会发现通过链接:hover和:focus伪类，我可以创建一个不同的样式，当悬停在已经聚焦的文本框上时（在聚焦时为蓝色，在悬停在同一聚焦文本框上时为红色）。

这值得注意，当查看我在codepen上的第二个演示（显然是在Edge中），自动完成已打开。当您点击到文本框时，背景颜色为红色（预期如此 - 我正在悬停在聚焦的文本框上）。但是，稍微移动一下鼠标，背景就会变成蓝色，表示文本框处于活动状态，但不再悬停在其上。这是不正确的 - 我们仍在悬停在上面。

这可能是Edge的怪癖，或者是浏览器处理自动完成的错误。可以考虑与Microsoft提出 - 在他们的问题跟踪器中似乎没有关于此的任何列表。

我提供的第一个链接中给出的答案之一建议使用jQueryUI的自动完成实现。当浏览器应默认执行此操作时，这有点麻烦，但您将能够针对自动完成列表的样式进行定位，并理论上避免您遇到的问题。

- PTD

---

没有答案能够完全满足我。但是我想奖励这个答案，因为它试图理解问题并提出了解决我的问题的变体，而不放弃下拉菜单。 - g1un

@g1un - 虽然我们没有找到更好的解决方案，但我很感激你的帮助。我想我还是会向 Microsoft 记录此问题，以了解他们的看法。如果他们修复了它，这将是少一种需要担心的浏览器怪癖。 - PTD

这个问题有相关的链接吗？ - user753676

@DanielRuf - 我一直没有来得及记录下来，但是我在我的codepen中展示的问题现在在Edge上似乎按预期工作了。 - PTD

到目前为止，我们无法通过CSS解决它，迄今为止似乎还没有解决方案。 - user753676

Answer 3

最好关闭自动填充

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

- Shaheed Mon

---

确实，在Microsoft Edge 42.17134.1.0中，这并不能解决它。 - Marc J. Schmidt

Answer 4

只需在您的CSS中添加outline: none;，它就可以解决问题！

CSS：

input { 
   outline: none;
}

HTML：

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

- Dreamer64

---

这至少对我来说就是这样了 - undefined

请记住，对于使用键盘导航的人来说，大纲非常重要，因为如果您删除它，他们将不知道哪个元素是焦点所在。请确保为:focus选择器添加样式，以确保不会让任何人感到困惑。 - undefined

Answer 5

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

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

- Diego N.