changing JavaFX spinner via css

Question

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

I know I can change the spinner button orientation via this code:

Spinner<Integer> spinner = new Spinner<Integer>(1, 20, 10);
            spinner.getStyleClass().add(split-arrows-horizontal);
            root.getChildren().add(spinner);

However, I want to achieve this via CSS or FXML. Does anybody know the solution

Answer 1

You can easily create a Spinner like this using fxml:

<Spinner styleClass="split-arrows-horizontal">
    <valueFactory>
        <SpinnerValueFactory.IntegerSpinnerValueFactory min="1" max="20" initialValue="10" />
    </valueFactory>
</Spinner>

You could of course copy all the styles from modena.css containing .split-arrows-horizontal as part of it's selector and use all of them, even if this part of the selector does not apply, but this seems unnecessarily complicated compared with the approach posted above.

Answer 2

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