title: CSS !important has no effect on XUL element
body: <p>I'm experimenting with XUL for an intranet application.</p>
  
  <p>I have encoutered an issue with CSS, where and !important directive in the style does not have any effect on a textbox element with the class 'error'.</p>
  
  <pre><code>textbox.error {
  background-color: #F00 !important;
  }
  </code></pre>
  
  <p>Only if I add the -moz-appearance: none; it starts to work, but it loses all the styles for that element.</p>
  
  <p>Is there any way to overload just the background-color property (in this case)?</p>
  
  <p>I want a native look for my application so this is very suboptimal.</p>
  
  <p>Thanks</p>
  
  <p>-- edit --</p>
  
  <p>This is the XUL structure:</p>
  
  <pre><code>&lt;?xml version="1.0"?&gt;
  &lt;?xml-stylesheet href="/_backend/views/css/xul.css" type="text/css"?&gt;
  
  &lt;window
  id="workorders-edit-window"
  title="{$title}"
  orient="horizontal"
  width="500"
  height="400"
  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;
  
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;vbox flex="1" orient="vertical"&gt;
  
      &lt;groupbox&gt;
          &lt;caption label="Osnovne informacije"/&gt;
  
          &lt;hbox flex="5"&gt;
              &lt;vbox&gt;
                  &lt;label control="ref" value="Št. delovnega naloga"/&gt;
                  &lt;textbox id="ref" size="10" value="" class="error"/&gt;
              &lt;/vbox&gt;
          &lt;/hbox&gt;
  
      &lt;/groupbox&gt;
  
  &lt;/vbox&gt;
  
  &lt;/window&gt;
  </code></pre>
  
  <p>And the CSS:</p>
  
  <pre><code>@import url(chrome://global/skin/);
  
  textbox.error {
  background-color: #F00;
  }
  </code></pre>