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.

Did you try to change all `-fx-background-color: #006699;` to another color? — 井R3Naiz0, Oct 05 '13 at 03:18
yes, if I do `contextMenu.setStyle("-fx-background-color:white");`, it does make the background white, but when you hover over one of the menu items, it is still blue. So i guess i'm missing which fx css tag I need to use? — SnakeDoc, Oct 05 '13 at 03:20
Is there a `.menu-item:hover` property...I seem to recall reading something? — Paulie_D, Oct 05 '13 at 20:58
Try taking a look at the menu-item styling in the default JavaFx stylesheet. Whatever is making the item blue is bound to be in there somewhere. [link](http://hg.openjdk.java.net/openjfx/2.2/master/rt/raw-file/tip/javafx-ui-controls/src/com/sun/javafx/scene/control/skin/caspian/caspian.css) — Brendan, Oct 11 '13 at 14:28

score 6 · Accepted Answer · edited Jun 20 '20 at 09:12

6

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:

edited Jun 20 '20 at 09:12

Community

1
1

answered Oct 11 '13 at 16:56

SnakeDoc

13,611
17
65
97

How to change MenuItem focus/hover color

1 Answers1