5

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?

1
  • 1
    searching more information, i can achive some changes trough .combo-box .arrow{...} and .combo-box .arrow-button {...} classes
    – tomasofen
    Jun 8, 2013 at 2:09

3 Answers 3

6

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;
}
2
  • Haven't had the chance to try it out, let me know if it does though
    – Alexandre
    Sep 10, 2014 at 15:16
  • Yup it works in Java 8 with JavaFX-2 for me, looking at modena.css is bit misleading here
    – PHPirate
    Jul 10, 2017 at 18:38
4

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

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

enter image description here
enter image description here

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. enter image description here

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

1
  • 1
    Thanks for the hint for the css analyzer. Didn´t know that feature. Saves my live! Jun 1, 2020 at 13:00
0

I wanted it to disappear too. But nothing worked for me on javafx 8 until I tried the following: css:.combo-box.REFERENCEDONLY .arrow-button { -fx-padding: 0 0 0 -7; }

basically it says: use negative padding on the arrow-button's left side to effectively shrink it.

javafx code:myCombobox.getStyleClass().add("REFERENCEDONLY");

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.