How to change statusbarpanel background color in firefox extension

Question

I'm writing a firefox extension which displays a statusbarpanel containing some text. I want to change the background color of my statusbarpanel depending on the message. e.g. red background for errors.

var pnl = document.getElementById("panelId");
pnl.label = "OK";
pnl.style.color = "white";
pnl.style.backgroundColor = "green";

All of the above code works except for the last line, which causes no change. The actual value of the property changes, but the statusbarpanel still shows the default status bar color. I also tried background instead of backgroundColor but that doesn't help.

Answer 1

Like the previous solution but only using javascript :

var pnl = document.getElementById("panelId");
pnl.label = "OK";
pnl.style.color = "white";
pnl.style.backgroundColor = "green";
pnl.style.MozAppearance = "none"

Note that after you do this you'll pretty much have to style it from scratch again and it will probably also lose it's OS specific style.

Answer 2

Try to set the -moz-appearance CSS property to 'none' or 'none !important'