CSSの変更JavafxTabPane

Css Modification Javafx Tabpane

CSSを使用してJavafxTabPaneのスタイルを変更します

/* Modify the background color of the Pane area of ​​TabPane */ .tab-pane { -fx-background-color: #e6e6e6 } /* Modify the background color of Tab */ .tab { -fx-background-color: #333333 } /* Modify the background color of the top bar */ .tab-pane>*.tab-header-area>*.tab-header-background { -fx-background-color: -fx-outer-border, -fx-text-box-border, #333333 } /* Modify the color of the text in the tab */ .tab-label { -fx-text-fill: #e6e6e6 } /* Child selector, select the child element tab-label when Tab is selected */ .tab:selected .tab-label { -fx-text-fill: #003333ff } /* Set the background color when the tab is selected */ .tab:selected { -fx-background-color: #990000ff } /* When Tab is selected, select its border and modify the style */ .tab-pane:focused > .tab-header-area > .headers-region > .tab:selected .focus-indicator { -fx-border-radius: 0px -fx-border-width: 1px 1px 1px 1px -fx-border-color: #4d1a4dff }

効果を達成するには：