How to change background color of menubutton in xul

I want to change the background color of the menu-button in toolbarbutton.

I applied the following code but it was not working.

<toolbarbutton id="search" background-color="red" type="menu-button" label="Search"  width="83" height="25" oncommand="webSearch();event.stopPropagation();">
    <menupopup>
        <menuitem label="Web" value="webs" onclick="webSearch();event.stopPropagation();"/>
        <menuitem label="Images" value="images" onclick="imageSearch();event.stopPropagation();"/>
        <menuitem la开发者_如何学Pythonbel="News" value="news" onclick="newsSearch();event.stopPropagation();"/>
        <menuitem label="Video" value="videos" onclick="videoSearch();event.stopPropagation();"/>
    </menupopup>
</toolbarbutton>

You should use CSS:

<toolbarbutton style="background-color: red;">

I don't think you can have background color of the button. Please check with this, you can change the color of the text not the button color.

I would suggest you to have a customized toolbar button.

https://developer.mozilla.org/en/custom_toolbar_button https://developer.mozilla.org/en/XUL/toolbarbutton

The above links will help you to fix your problem.

<toolbar>
  <toolbarbutton label="Checkbox Type" type="checkbox" image="firefox.png"/>
  <toolbarbutton label="Menu Type" type="menu" popup="button-popup" style="font: bold 11px Verdana, sans-serif !important; color:#327DC7; background-color=#327DC7;" />
  <toolbarbutton label="Menu Button Type" type="menu-button" popup="button-popup" image="firefox.png"/>
  <menupopup id="button-popup">
    <menuitem label="Item 1"/>
    <menuitem label="Item 2"/>
    <menuitem label="Item 3"/>
  </menupopup>
</toolbar>

To know more about the toolbar menu button CSS features, you can check the Firefox dafult settings in the installation directory in your system. For example, like this:

jar:file:///C:/Program%20Files/Mozilla%20Firefox/chrome/classic.jar!/skin/classic/global/toolbarbutton.css