Titled pane css settings

Question

I wonder how to apply CSS settings to a TitledPane, but can\'t find any example

I would like to apply custom settings for TitledPane toolba

Answer 1

The official documentation for CSS styling Titled Panes can be found here (see @siddharth gupta's answer regarding possible properties).

You may consider to style only a certain sub-component, e.g., .titled-pane > .title > .text. Titled panes have the following layout:

• titled-pane - TitledPane
  • title — HBox
    • text — Label
    • arrow-button — StackPane
      • arrow — StackPane
  • content — StackPane

Here is the default formatting for the TitledPane's "header":

.titled-pane > .title 
{
    -fx-background-color: -fx-box-border, -fx-inner-border, -fx-body-color;
    -fx-background-insets: 0, 1, 2;
    -fx-background-radius: 5 5 0 0, 4 4 0 0, 3 3 0 0;
    -fx-padding: 0.166667em 0.833333em 0.25em 0.833333em; /* 2 10 3 10 */
}