How to style menu button and menu items
Solution 1
MenuButton
uses Menu
internally and has a similar API. In such way that MenuButton
contains MenuItem
s list just like Menu
. So I think you need to try to play with .menu
, .menu-button
and .menu-item
CSS selectors in caspian.css. More specifically with .menu-item
.
EDIT: It seems you need to change the .context-menu
too, because the popped up menu of the menuButton is ContextMenu.
.menu-item .label {
-fx-text-fill: white;
}
.menu-item:focused {
-fx-background-color: darkgray;
}
.menu-item:focused .label {
-fx-text-fill: blue;
}
.context-menu {
-fx-skin: "com.sun.javafx.scene.control.skin.ContextMenuSkin";
-fx-background-color: black;
-fx-background-insets: 0, 1, 2;
-fx-background-radius: 0 6 6 6, 0 5 5 5, 0 4 4 4;
/* -fx-padding: 0.666667em 0.083333em 0.666667em 0.083333em; 8 1 8 1 */
-fx-padding: 0.333333em 0.083333em 0.666667em 0.083333em; /* 4 1 8 1 */
}
Solution 2
This has also been asked here and here, so I decided to write a CSS template for styling menu bars.
Using this CSS template is a very easy way to style a MenuBar
, its top-level MenuButton
entries, and each MenuButton
's MenuItem
children, i.e, "the whole menu bar".
The only thing that has to be done is to adjust four variables according to one's needs:
-
-fx-my-menu-color
: The menu bar's default background color (i.e., when item is not hovered / selected) -
-fx-my-menu-color-highlighted
: An item's background color if it is hovered / selected. -
-fx-my-menu-font-color
: The menu bar's default font color (i.e., when item is not hovered / selected) -
-fx-my-menu-font-color-highlighted
: An item's font color if it is hovered / selected.
The complete CSS file is commented to explain each defined rule:
/* VARIABLE DEFINITIONS: Only these 4 variables have to be adjusted, the rest is copy-paste */
* {
-fx-my-menu-color: #263238; /* Change according to your needs */
-fx-my-menu-color-highlighted: #455a64; /* Change according to your needs */
-fx-my-menu-font-color: #FFFFFF; /* Change according to your needs */
-fx-my-menu-font-color-highlighted: #FFFFFF; /* Change according to your needs */
}
/* MENU BAR + Top-level MENU BUTTONS */
/*** The menu bar itself ***/
.menu-bar {
-fx-background-color: -fx-my-menu-color;
}
/*** Top-level menu itself (not selected / hovered) ***/
.menu-bar > .container > .menu-button {
-fx-background-color: -fx-my-menu-color;
}
/*** Top-level menu's label (not selected / hovered) ***/
.menu-bar > .container > .menu-button > .label {
-fx-text-fill: -fx-my-menu-font-color;
}
/*** Top-level menu's label (disabled) ***/
.menu-bar > .container > .menu-button > .label:disabled {
-fx-opacity: 1.0;
}
/*** Top-level menu itself (selected / hovered) ***/
.menu-bar > .container > .menu-button:hover,
.menu-bar > .container > .menu-button:focused,
.menu-bar > .container > .menu-button:showing {
-fx-background-color: -fx-my-menu-color-highlighted;
}
/*** Top-level menu's label (selected / hovered) ***/
.menu-bar > .container > .menu-button:hover > .label,
.menu-bar > .container > .menu-button:focused > .label,
.menu-bar > .container > .menu-button:showing > .label {
-fx-text-fill: -fx-my-menu-font-color-highlighted;
}
/* MENU ITEM (children of a MENU BUTTON) */
/*** The item itself (not hovered / focused) ***/
.menu-item {
-fx-background-color: -fx-my-menu-color;
}
/*** The item's label (not hovered / focused) ***/
.menu-item .label {
-fx-text-fill: -fx-my-menu-font-color;
}
/*** The item's label (disabled) ***/
.menu-item .label:disabled {
-fx-opacity: 1.0;
}
/*** The item itself (hovered / focused) ***/
.menu-item:focused, .menu-item:hovered {
-fx-background-color: -fx-my-menu-color-highlighted;
}
/*** The item's label (hovered / focused) ***/
.menu-item:focused .label, .menu-item:hovered .label {
-fx-text-fill: -fx-my-menu-font-color-highlighted;
}
/* CONTEXT MENU */
/*** The context menu that contains a menu's menu items ***/
.context-menu {
-fx-background-color: -fx-my-menu-color;
}
Vinod CG
UX Developer, Web application developer and Game developer
Updated on July 05, 2022Comments
-
Vinod CG almost 2 years
I tried to change styles in menu button. I could change menu button style but not its menu item. No matter what i try menu item inside menu-button remains unchanged.
.menu-button { -fx-background-color:black; } .menu-button .label { -fx-background-color:black; }
Now how can i change color that is left out??
-
Tony almost 6 yearsThis works but it changes all the entries in the menu bar to the same colour. Is there a way to change each entry to a different colour?
-
DoombringerBG over 4 years@Tony I'm not sure what you mean by an entry, but you can assign an
id
to amenu-bar
/menu-button
and refer to it in theCSS
with#myMenuBar
instead of.menu-bar
/.menu-button
and the rest would remain the same or for example,#myMenuButton .menu-item:focused {....}
.