cssjavafxspinnerjavafx-css

Change style of javafx spinner buttons using css

I am trying to change the style of the javafx spinner using a css stylesheet.

However, when changing the colour I can only change the colour of the text field and the arrow buttons to the side of spinner still look like the default.

How can I change the colour of these buttons too?

Solution

  • Set the -fx-body-color that is used as background for the buttons:

    .spinner .increment-arrow-button,
.spinner .decrement-arrow-button {
    -fx-body-color: yellow;
}

.spinner .increment-arrow-button:hover,
.spinner .decrement-arrow-button:hover {
    /* interpolate color between yellow and red based on first color brightness */
    -fx-body-color: ladder(#444, yellow 0%, red 100%);
}

.spinner .increment-arrow-button:hover:pressed,
.spinner .decrement-arrow-button:hover:pressed,
.spinner .increment-arrow-button:pressed,
.spinner .decrement-arrow-button:pressed {
    /* interpolate color between yellow and red based on first color brightness */
    -fx-body-color: ladder(#AAA, yellow 0%, red 100%);
}

    Those are used by the default stylesheet as the button's background color.