Search code examples
javacssjavafxtabsselecteditem

JavaFX TabPane CSS : delete blue selection zone

I'm looking for deleting the blue selection zone around a selected tab in JavaFX CSS.

Here is my problem

image

And my CSS :

.tab-pane .tab-header-area .tab-header-background {
    -fx-opacity: 0;
}

.tab-pane
{
    -fx-tab-min-width:88px;
}

.tab-pane .tab
{
    -fx-background-color: gray;
    -fx-background-insets: 0 1 0 1,0,0;
}

.tab-pane .tab:selected
{
    -fx-background-color: #f10707;
}


.tab .tab-label { 
    -fx-alignment: CENTER;
    -fx-text-fill: white;
    -fx-font-size: 14px;
    -fx-font-family: "Arial Rounded MT Bold";
}

.tab:selected .tab-label { 
    -fx-alignment: CENTER;
    -fx-text-fill: white;    

}

Any help is appreciated.

Solution

  • Try

    .tab-pane:focused .tab:selected .focus-indicator {
    -fx-border-width: 0 ;
    -fx-border-color: transparent;
    -fx-border-insets: 0;
    -fx-border-radius: 0;
}