How to change MenuItem focus/hover color


Question

I'm trying to change the highlight/focus/hover color of menu items.

I'm trying to change the blue background to another color, but nothing seems to work?

I've tried a few things with no luck from: How do you set the style for a JavaFX ContextMenu using css? and How to style menu button and menu items

.context-menu:focused {
    -fx-background-color:white;
    -fx-focus-color:white;
}

.menu-item:focused {
    -fx-background-color:white;
    -fx-focus-color:white;
}

.menu:focused {
    -fx-background-color:white;
    -fx-focus-color:white;
}

and many other variations...

Also some example code that's using the menu item's

// Menu
final ContextMenu contextMenu = new ContextMenu();

and construct a MenuItem:

maximizeMenuItem = new MenuItem(Config.getString("Maximize"));
maximizeMenuItem.setOnAction(new EventHandler<ActionEvent>() { /* do stuff */ }

I could try a:

contextMenu.setStyle("-fx-focus-color:white");

or

maximizeMenuItem.setStyle("-fx-focus-color:white");

but I can't seem to figure out which -fx- css tag controls that blue background color...

If possible, please post the FXML solution as well as the in-line code solution.

1
3
5/23/2017 12:02:05 PM

Accepted Answer

Ok, a little embarrassed. I had my layers messed up to where my stylesheet wasn't being applied like I thought it was.

So the correct way to change the menu-item's background color when focused is:

.menu-item:focused {
     -fx-background-color: #969A9F;
}

Once I found and sorted out my css layering problem, it now works as expected as result it:

6
2/8/2017 2:47:45 PM

Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
Icon