Question

I’m experimenting with XUL for an intranet application.

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’.

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

Only if I add the -moz-appearance: none; it starts to work, but it loses all the styles for that element.

Is there any way to overload just the background-color property (in this case)?

I want a native look for my application so this is very suboptimal.

Thanks

— edit —

This is the XUL structure:

<?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>

And the CSS:

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

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

Answer 1

Unfortunately, that’s just how the system works. If you want native styling then there is a number of properties that will be set by the system – and you cannot override those. And if you disable native styling via -moz-appearance: none then you will have to define all properties that normally work out of the box.

However, sometimes you can achieve the desired effect by using other CSS properties, ones that aren’t determined by the native styling. I didn’t come up with the solution myself, I rather looked up what the findbar code is doing. Turns out that the box-shadow property can be used here:

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