CODEWITHSUNDEEP
cssjavafxspinner
Roger
Roger

Reputation: 607

changing JavaFX spinner via css

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

Upvotes: 1

Views: 1253

Answers (2)

nezar
nezar

Reputation: 1

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

Upvotes: 0

fabian
fabian

Reputation: 82491

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.

Upvotes: 2

Related Questions