CSS !important 对 XUL 元素没有影响

Question

我正在尝试将 XUL 用于 Intranet 应用程序。

我遇到了 CSS 问题，其中样式中的 !important 指令对类为“error”的文本框元素没有任何影响。

textbox.error {
background-color: #F00 !important;
}

仅当我添加 -moz-appearance: none;它开始工作，但它丢失了该元素的所有样式。

有没有办法只重载背景颜色属性(在本例中)？

我希望我的应用程序具有 native 外观，因此这是非常次优的。

谢谢

--编辑--

这是 XUL 结构:

<?xml version="1.0"?>
<?xml-stylesheet href="/_backend/views/css/xul.css" type="text/css"?>

<window
id="workorders-edit-window"
title="{$title}"
orient="horizontal"
width="500"
height="400"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<vbox flex="1" orient="vertical">

    <groupbox>
        <caption label="Osnovne informacije"/>

        <hbox flex="5">
            <vbox>
                <label control="ref" value="Št. delovnega naloga"/>
                <textbox id="ref" size="10" value="" class="error"/>
            </vbox>
        </hbox>

    </groupbox>

</vbox>

</window>

还有 CSS:

@import url(chrome://global/skin/);

textbox.error {
background-color: #F00;
}

Answer 1

不幸的是，这就是系统的工作原理。如果您想要 native 样式，那么系统将设置许多属性 - 并且您无法覆盖这些属性。如果您通过 -moz-appearance: none 禁用 native 样式，那么您将必须定义通常开箱即用的所有属性。

但是，有时您可以通过使用其他 CSS 属性来实现所需的效果，这些属性不是由 native 样式决定的。我自己没有想出解决方案，我宁愿查一下findbar code是在做。事实证明box-shadow property可以在这里使用:

textbox.error {
  box-shadow: 0 0 0 1em #f00 inset;
}