I allways have a troubles with styling XUL elements and without DOM Inspector it could be even worse. Today I’ve tried to style <button type="menu"/> and it also was a hard work but result is pretty good:

As you see I have two types of menu buttons – with label and without – the most difficult part was to disable flex on inner <hbox> element inside the button element.

Here is the final CSS:

  1. /* Styles for menu buttons on message header overlay */
  2. .noteMsghdrButton, .noteMsghdrButtonIconic {
  3.   border: 0px none !important;
  4.   background-color: -moz-field !important;
  5. }
  6. .noteMsghdrButton > hbox,
  7. .noteMsghdrButton > hbox > hbox,
  8. .noteMsghdrButtonIconic > hbox,
  9. .noteMsghdrButtonIconic > hbox > hbox {
  10.   background-color: -moz-field !important;
  11.   -moz-box-flex: 0 !important;
  12. }
  13. /* we expecting 16 x 16 icon */
  14. .noteMsghdrButtonIconic  { min-width: 30px !important; }
  15. .noteMsghdrButtonIconic > hbox > hbox { width: 20px !important; }
  16. .noteMsghdrButtonIconic > hbox > hbox > label { display: none; }
  17.