css - 时尚的附加组件 : border-radius property breaking my CSS

Question

我正在使用 Stylish 浏览器扩展为网站创建自定义深色主题。在最近的更新中，网站所有者为很多东西设计了圆 Angular ，在我看来这非常丑陋，尤其是输入字段。但是，当我尝试申请 border-radius: 0px !important; 时使用 Stylish，输入字段变得疯狂。它适用于常规 div 之类的东西，但不适用于任何类型的输入，无论是常规 <input type=text> , 一个 <textarea>甚至像 <select> 这样的东西.

这是没有自定义 CSS 的文本区域的样子:

这是我的自定义 CSS 的样子:

这是我添加 border-radius: 0px !important; 时的样子到我的 CSS:

当 border-radius: 0px已应用，所有其他 border属性和 background被忽略。甚至没有使用站点的 native CSS 属性。浏览器只是使用标准外观，就像根本没有为文本区域定义 CSS 规则一样。 color仍然有效。

就像border-radius 打算改变一切。如果我只在 :hover 上添加它，输入字段只会在悬停时变得疯狂。我什至不必使用 0px :即使我使用相同的 6px 也会出现问题网站的原生 CSS 使用的。

这是我的整个 CSS 规则:

textarea, input[type="text"], .textbox {
    border-color: #282828 !important;
    border-width: 3px !important;
    border-style: solid !important;
    border-radius: 0px !important;
    background: #0F0F0F !important;
    color: grey !important;
}

真正奇怪的是 border-radius: 0px使用 Firefox 开发人员工具添加时没有问题，所以它似乎是时尚的问题。

是什么导致了这种疯狂？我该如何解决？有解决方法吗？我唯一的想法是使用添加属性的自定义 JS ...

Answer 1

天哪，删除 border-style: solid; 修复了所有问题。我不知道为什么，但我现在很开心。