Question

我正在尝试使用XUL进行内部网应用。

我遇到过CSS的问题，其中，样式中的！important指令对带有“错误”类的文本框元素没有任何影响。

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;
}

CSS！important对XUL元素没有影响

1 个答案: