CSS for setting SeparatorMenuItem color?

JoshuaD :

I would like to change the color of a SeparatorMenuItem in my program. What CSS code will allow me to change its color? I cannot find any information on it in the JavaFX CSS Reference Guide.

José Pereda :

This question has been answered a number of times already for other controls. But here you go:

Follow the code

When you add a SeparatorMenuItem, you can see the source code here or directly from your IDE.

public SeparatorMenuItem() {
    super(new Separator(Orientation.HORIZONTAL), false);
    getStyleClass().add(DEFAULT_STYLE_CLASS);
}

It uses as DEFAULT_STYLE_CLASS, separator-menu-item, and extends CustomMenuItem, which extends MenuItem, which is not a control, so this style class might not be the one we need to modify.

When you click the Menu node it displays a ContextMenu with style class context-menu, containing the menu items, the skin used to render the content is ContextMenuSkin, and each item uses a ContextMenuContent.MenuItemContainer:

Container responsible for laying out a single row in the menu - in other words, this contains and lays out a single MenuItem, regardless of it's specific subtype.

The items are added to a ContextMenuContent.MenuBox (a VBox), but this container doesn't have a specific style class.

The content node of the SeparatorMenuItem is a Separator, a Node with style class separator, that has SeparatorSkin as skin, and it just renders a line, a region with line as style class.

Finally, we can do something like this to change the SeparatorMenuItem color:

.context-menu > * > .separator > .line {
    -fx-border-color: red;
    -fx-border-insets: 0;
}

As you can see, the main issue is finding out the real node that is being rendered in the scene-graph, along with their parents.

It is also helpful to print this:

menu.setOnShown(e -> {
        Node node = separatorMenuItem.getContent();
        do {
            System.out.println("Node: " + node);
            node = node.getParent();
        } while (node != null);
    });

It will print something like:

Node: Separator@296d4a5a[styleClass=separator]
Node: ContextMenuContent$MenuBox@14793a99
Node: ContextMenuContent[id=null, styleClass=context-menu]
Node: PopupControl$CSSBridge[id=null, styleClass=context-menu]
Node: Pane@2decd2c5[styleClass=root popup]

Use ScenicView

Download the JDK 11 version for your platform from here, and while running your app, launch it from scenicview/bin/scenicview:

While you will see the full scenegraph hierarchy when you display the menu content, like in the picture above, in this case there is a major issue that prevents you from click on any of the nodes to inspect its content and style classes, without closing the menu.

So while it won't help in this case, it is always a really useful tool to use.

Check modena.css

Modena is the theme applied by default to all the built-in JavaFX controls.

Either here, or from your IDE, you can find the exact style applied to the control.

In this case:

.context-menu .separator:horizontal .line {
    -fx-border-color: -fx-box-border transparent transparent transparent;
    -fx-border-insets: 1 0 0 0;
}

So now you can change that as needed. Note that it matches precisely what we have found via source code.