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; }