CODEWITHSUNDEEP
javacssjavafx
tmn
tmn

Reputation: 11559

JavaFX - Get Rid of `CustomMenuItem` blue highlight?

I have been struggling to remove a blue highlight from a ContextMenu implementation when it is hovered over. 

private void attachContextMenu() {
    CustomMenuItem item = FilterPanel.getInMenuItem(this);
    ContextMenu contextMenu = new ContextMenu();
    contextMenu.getItems().add(item);


    tableColumn.setContextMenu(contextMenu);
}

With the containing VBox I was able to paint it white and get rid of a majority of the blue flash.

filterVBox.setStyle("-fx-background-color: white;");

But i cannot figure out how to get the CustomerMenuItem to lose the blue border when focused with the mouse.I tried the following but it does not work

CustomMenuItem item = FilterPanel.getInMenuItem(this);
item.setStyle("-fx-text-fill: white;");

Here is the PR if you want the full picture, but does anybody have an idea how I can manipulate that to go away?

I was able to get it to go away by styling every MenuItem for the entire TableView with this CSS. But I'd like to apply it specifically to just that CustomMenuItem. 

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

Upvotes: 3

Views: 2360

Answers (1)

José Pereda
José Pereda

Reputation: 45466

Since the blue highlight happens when the ContextMenu gets the focus, you are dealing here with a Pseudoclass. In CSS, a pseudo-class is used to define a specific state of a node. Typical states are hover, selected, focused...

The way to deal with this is by adding a CSS file, where you can easily apply your style settings to any of the possible states.

First, apply a style class to your ContextMenu (so other controls using context menus don't get affected by these settings). For instance, column-filter:

private void attachContextMenu() {
    CustomMenuItem item = FilterPanel.getInMenuItem(this);

    ContextMenu contextMenu = new ContextMenu();
    contextMenu.getStyleClass().add("column-filter");

    contextMenu.getItems().add(item);
    tableColumn.setContextMenu(contextMenu);
}

Then add the required styling rules to a css file:

style.css

.column-filter .context-menu {
    -fx-background-color: white;
}

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

.column-filter .custom-menu-item {
    -fx-background-color: white;
    -fx-padding: 0;
}

.column-filter .custom-menu-item:focused {
    -fx-background-color: white;
}

Finally you need to apply this stylesheet to the scene:

scene.getStylesheets().add(getClass().getResource("style.css").toExternalForm());

And you'll get rid of the highlight.

TableFilter

Upvotes: 6

Related Questions