2

我正在为 Intranet 应用程序使用 XUL 进行试验。

我遇到了一个 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;
}
4

1 回答 1

2

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

但是，有时您可以通过使用其他 CSS 属性来实现所需的效果，这些属性不是由本机样式确定的。我自己并没有想出解决方案，而是查找了findbar 代码在做什么。事实证明，该box-shadow属性可以在这里使用：

textbox.error {
  box-shadow: 0 0 0 1em #f00 inset;
}
于 2012-11-28T18:22:08.060 回答