时尚Add-On:border-radius属性打破我的CSS

Question

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

之类的东西

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

这是我自定义的样子 CSS:

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

时的样子

应用 border-radius: 0px 时，将忽略所有其他 border 属性和 background。甚至没有使用网站的本机 CSS 属性。浏览器只是使用标准外观，就像根本没有为文本区域定义 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;
}

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

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

Answer 1

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

时尚Add-On:border-radius属性打破我的CSS

Stylish Add-On: border-radius property breaking my CSS

css

stylish