How to replace the arrow with a custom graphic on a TitledPane?

Question

The TitledPane has an arrow that changes state (rotates) to show whether the pane is collapsed or expanded. Is there a way to replace this arrow with a custom graphic for each state?

Answer 1

Most definitely. Everything in the controls is style-able from CSS. The region you are attempting to style can be addressed via:
.titled-pane > .title > .arrow-buttonSo you could specify images here for example, or you can just change the arrow path by adding another > .arrow on the end. Below I've posted the entire CSS style that is built in for TitledPane so you can see how the whole thing is styled. You can create your own stylesheet, copy/paste this in there, and then start tweaking things and see how it affects the look of the TitledPane.
Cheers
Richard
* TitledPane                                                                  *
.titled-pane {
    -fx-skin: "com.sun.javafx.scene.control.skin.TitledPaneSkin";
.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 */
.titled-pane > .title > .arrow-button {
    -fx-background-color: null;
    -fx-background-insets: 0;
    -fx-background-radius: 0;
    -fx-padding: 0.0em 0.25em 0.0em 0.0em; /* 0 3 0 0 */
.titled-pane > .title > .arrow-button .arrow {
    -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
    -fx-background-insets: 1 0 -1 0, 0;
    -fx-padding: 0.25em 0.3125em 0.25em 0.3125em; /* 3 3.75 3 3.75 */
    -fx-shape: "M 0 0 h 7 l -3.5 4 z";
.titled-pane:collapsed > .title > .arrow-button .arrow {
    -fx-rotate: -90;
.titled-pane > *.content {
    -fx-background-color:
        -fx-box-border,
        linear-gradient(to bottom, derive(-fx-color,-02%), derive(-fx-color,65%) 12%, derive(-fx-color,23%) 88%, derive(-fx-color,50%) 99%, -fx-box-border);
    -fx-background-insets: 0, 0 1 1 1;
    -fx-padding: 0.167em;
.titled-pane:focused > .title {
    -fx-color: -fx-focus-color;
.titled-pane:focused > .title > .text {
    -fx-text-fill: white;
.titled-pane:focused > .title > .arrow-button .arrow {
    -fx-background-color: white;
}