Change style of javafx spinner buttons using css

Question

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?

score 2 · Accepted Answer · answered Jul 30 '16 at 07:32

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.

Thanks! How would I change the colour of the actually arrow? When making the button dark there isn't enough contrast between the arrow icon — FrancisG, Jul 30 '16 at 10:02
Don't worry I've figured it out, my problem was that I wasn't interpreting the javafx css reference guide correctly, thanks so much for your help! — FrancisG, Jul 30 '16 at 10:07

score 1 · Answer 2 · answered Jan 24 '21 at 08:03

I know the OP figured it out but I'm putting this here in case someone else needs an answer.

You can edit spinner buttons with these selectors:

.spinner .increment-arrow-button {}
.spinner .decrement-arrow-button {}
.spinner .increment-arrow-button:hover {}
.spinner .decrement-arrow-button:hover {}
.spinner .increment-arrow-button:pressed {}
.spinner .decrement-arrow-button:pressed {}

If you'd like to edit the arrows inside the buttons themselves, use these selectors:

.spinner .increment-arrow-button .increment-arrow {
  /* The default Modena styling */
  -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
  -fx-background-insets: 0 0 -1 0, 0;
  -fx-padding: 0.166667em 0.333333em 0.166667em 0.333333em;  /* 2 4 2 4 */
  -fx-shape: "M 0 4 h 7 l -3.5 -4 z";
}
.spinner .decrement-arrow-button .decrement-arrow {
  /* The default Modena styling */
  -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
  -fx-background-insets: 0 0 -1 0, 0;
  -fx-padding: 0.166667em 0.333333em 0.166667em 0.333333em; /* 2 4 2 4 */
  -fx-shape: "M 0 0 h 7 l -3.5 4 z";
}

Here is another helpful tip for something people may also run into: changing the color in the area behind the buttons.

Setting these selectors to have a transparent background will remove the highlighted areas behind the buttons within the spinner. You can achieve that with something like this:

/* In general */
.spinner {
 -fx-background-color: transparent;
}

/* On user interaction */
.spinner:focused,
.spinner:contains-focus {
  -fx-background-color: transparent;
}

Just a few things I picked up while creating my own dark theme stylesheet that I use for school projects.

Change style of javafx spinner buttons using css

2 Answers2