Close options for TabPane

Currently, you have three closing options for a TabPane, that you can set with TabClosingPolicy :

• All_TABS : All tabs will have the option to be closed and have the cross displayed in the upper-right corner.
• SELECTED_TAB : Only the selected tab will have the option to be closed.
• UNAVAILABLE : Tabs can not be closed by the user.

This is very useful but sometimes you need to customize a little bit more. In order to do that, you need to modify your CSS.

One request I once had was to only show the cross when the mouse was over it. In order to achieve that, we need to access the .tab-close-button CSS property :

.tab-close-button{
    -fx-background-color:transparent;
}
.tab-close-button:hover{
    -fx-background-color:derive(-fx-mark-color, -30%);
}

From there, possibilities are endless. For example, show crosses all the time, but display it red for the selected tab :

.tab-pane > .tab-header-area > .headers-region > .tab:selected > .tab-container > .tab-close-button{
    -fx-background-color:red;
}

You can also remove the -fx-shape and add a custom image :

.tab-close-button{
    -fx-background-image : url("close.png");
    -fx-background-size : 13;
    -fx-background-repeat : no-repeat;
    -fx-background-position : center;
    -fx-shape: null;
     -fx-background-color: transparent;
}