CSS !important 对 XUL 元素没有影响

Question

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

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

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

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

有没有办法只重载 background-color 属性（在这种情况下）？

我希望我的应用程序具有原生外观，因此这不是最理想的。

谢谢

-- 编辑--

这是 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

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

但是，有时您可以通过使用其他 CSS 属性来实现所需的效果，这些属性不是由本机样式确定的。我自己没有想出解决方案，我宁愿查看findbar code 正在做什么。原来box-shadow property可以用在这里：

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