新版 Microsoft Edge (83.0.478.56)，无法覆盖用户代理样式

Question

在我的网站上，我有 CSS 样式可以防止输入框或文本区域出现边框。这在 Firefox、Chrome 和直到最近的 Microsoft Edge 中都有效。随着 Edge 的最新更新，焦点输入和文本区域有一个边框，来自“用户代理样式”。这是一个例子：

https://jsfiddle.net/da6meyhb

<div>
   <textarea class="style1" rows="10">Hello World!</textarea>
</div>

textarea.style1,
textarea.style1:focus,
textarea.style1:hover {
  background-color: aqua;
  border-style: none;
  border-width: 0px;
  border-radius: 0px;
  resize: none;
}

此示例有一个文本区域，带有 CSS 样式以防止出现边框。在新版Microsoft edge（83.0.478.56）中，textarea在聚焦时仍然有黑边

如何禁用此边框？

Answer 1

正如CBroe所说，在Chrome浏览器中也有同样的问题，然后关注textarea，它也在textarea中显示黑边。

要禁用边框，请尝试添加 outline: none !important;、sample code，如下所示：

<style>
    textarea.style1,
    textarea.style1:focus,
    textarea.style1:hover {
        background-color: aqua;
        border-style: none;
        border-width: 0px;
        border-radius: 0px;
        resize: none;
        outline: none !important;
    } 
</style>

Edge 浏览器（版本 83.0.478.56（正式版）（64 位））中的输出如下：

新版 Microsoft Edge (83.0.478.56)，无法覆盖用户代理样式

New version of Microsoft Edge (83.0.478.56), cannot override user agent styles

css

microsoft-edge