如何移除TreeView失去焦点时的白色边框？

Hey there! I totally get how frustrating that unexpected white border can be when your TreeView loses focus—especially after you already nailed fixing the blue focused border. Let's get rid of that pesky white one too.

The Root Cause #

That white border you're seeing comes from JavaFX's default styling for the TreeView when it's not focused. Even though you disabled the focus colors, the control might still have a default border or background inset that kicks in on focus loss.

The Fix #

Update your CSS to explicitly override the border and background inset properties for both focused and unfocused states of the TreeView and its cells. Here's how to adjust your existing styles:

.grid-pane { 
    -fx-background-color: #181818; 
}

/* Base styles to eliminate borders in all states */
.tree-view, .tree-cell { 
    -fx-focus-color: transparent; 
    -fx-faint-focus-color: transparent;
    -fx-border-color: transparent;
    -fx-background-insets: 0;
}

/* Ensure focused state also has no borders */
.tree-view:focused, .tree-cell:focused {
    -fx-background-insets: 0;
    -fx-border-color: transparent;
}

#mainMenu .tree-cell { 
    -fx-padding: 0.25em 0em 0.25em 0em; 
    -fx-font-size: 28px; 
    -fx-background-color: #181818; 
}

#mainMenu .tree-cell > .tree-disclosure-node > .arrow { 
    -fx-background-color: #FFFFFF; 
    -fx-alignment: center; 
}

#mainMenu .tree-cell:expanded > .tree-disclosure-node > .arrow { 
    -fx-background-color: #FFFFFF; 
    -fx-alignment: center; 
}

#mainMenu .label { 
    -fx-text-fill: white; 
}

What Each Change Does: #

• -fx-border-color: transparent: Directly sets the border color to transparent for all states, overriding any default border styles.
• -fx-background-insets: 0: Removes any internal padding that might create a visual "border" effect by shifting the background away from the control's edge.
• Targeting both the base and :focused states ensures that no matter if the TreeView has focus or not, it won't show any unwanted borders.

Quick Check #

If you still see a border after applying this, double-check if your #mainMenu selector is adding any unintended borders or if a parent container (like a ScrollPane) is contributing to the visual. But in most cases, the above changes should eliminate that white border entirely.

Give it a try—hope this solves your problem! 😊

内容的提问来源于stack exchange，提问作者rgl