时尚的附加组件：border-radius属性打破了我的CSS

Question

我使用Stylish浏览器扩展程序为网站创建自定义黑暗主题。在最近的更新中，网站所有者为很多事情提出了圆角，这在我看来很难看，特别是对于输入字段。但是，当我尝试使用Stylish应用border-radius: 0px !important;时，输入字段会变得疯狂。它可以在常规div上运行，但不适用于任何类型的输入，无论是常规<input type=text>，<textarea>还是<select>之类的内容。

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

这就是我的自定义CSS的样子：

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

应用border-radius: 0px时，将忽略所有其他border属性和background。甚至不使用网站的原生CSS属性。浏览器只使用标准外观，就像根本没有为textarea定义的CSS规则。 color仍然有用。

就像border-radius 意图来改变一切。如果我只在:hover添加它，输入字段只会在悬停时发疯。我甚至不必使用0px：即使我使用网站原生CSS使用的6px，也会出现问题。

这是我的整个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;
}

使用Firefox开发人员工具添加border-radius: 0px导致没有问题的事实真的很奇怪，所以它看起来很时髦。

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

Answer 1

天啊，删除border-style: solid;修复一切。我不知道为什么，但我现在很开心。