How to change the background color in JavaFX ComboBox's Arrow Button via css?

Question

I'm trying to change the background color of the arrow button in a ComboBox. Using JavaFX 8 with the default Modena.css theme, if it matters.

According to the documentation ( https://docs.oracle.com/javase/8/javafx/api/javafx/scene/doc-files/cssref.html#combobox ), The arrow-button is a StackPane, so I would assume the following would work:

.combo-box .arrow-button {
    -fx-background-color: blue;
}

This should change the background to be a blue color, but the color still stayed the same.

The background could be an image, so I've tried adding on -fx-background-image: null; to the above, but that doesn't seem like it's working.

Not sure what the issue is now.

UPDATE: FOUND THE ISSUE!

Apparently this is an issue with my css code having the following:

#arrow-button {
    -fx-padding: 5 0 5 0;
    -fx-font: 16 arial;
    -fx-font-weight: bold;
    -fx-background-color: 
        linear-gradient(#FFE4D1 0%, #EED5C2 25%, #EDD2BD 75%, #FFE4D1 100%),
        linear-gradient(#FFE1CC 0%, #FCE2CF 20%, #EDD0BB 80%, #FFE1CC 100%);
    -fx-border-color: #ED9D9C;
    -fx-background-radius: 5;
    -fx-border-radius: 5;
}

Apparently JavaFX is taking my ID selector and using that to display the .combo-box .arrow-button.

This is probably a bug, but not sure. Will ask the JavaFX developers.

Thanks for all the help!

Answer 1

Can you try this:

.combo-box .arrow, .combo-box .arrow-button, .combo-box .arrow-button .arrow {
    -fx-background-color: blue;
}

.combo-box-base .arrow, .combo-box-base .arrow-button, .combo-box-base .arrow-button .arrow {
    -fx-background-color: blue;
}

One of these should work.