JavaFX combobox css styling

Question

I'm trying to customize a combo box in JavaFX through css. I can't customize the "arrow button" on the right (I want it to disappear, or to have a custom graphic, for example).

I have been checking the default caspian.css, but no matter what modifications I do to the .combo-box section, the arrow button is not affected.

Any idea of where this can be edited?

Answer 1

Using the following CSS in the style sheet will get rid of all of the ComboBox arrows

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

Answer 2

Use the CSS Analyser option in Scenebuilder to get the CSS of any node that you want to play with

After that just select any node and you'll see all the classes which you can modify using CSS.

Now that I know the class I can make my changes accordingly in my CSS file

.combo-box{
    -fx-border-color:#E6E6E6;
    -fx-border-style:solid;
    -fx-border-width:1;
}
.combo-box .arrow{
    -fx-background-color:#2478E9;
}
.combo-box .arrow-button{
    -fx-background-color:white;
    -fx-border-style:none;
}
.combo-box .arrow-button{
    -fx-background-color:white;
}
.combo-box .list-cell{
    -fx-background-color:white;
}

Which gives me an end result like this.

For more advanced analysis of CSS and other Events occurring when the application is running, you can try Scenic View.