1

How can I style a ComboBox "body" part not the dropdown?

As you can see on the screenshot I want to style just that part where you click and opens the dropdown and the dropdown should remain as it is.

If I try for example:

.combo-box-base .list-cell{
    -fx-background-color: red;
}

everything goes red not just what I want.

I had a look at this question: Javafx combobox styling but it didnt really helped me, it styles everything but not that specific part I need.

I have also looked with ScenicView, and I could locate it and add as style: -fx-background-color: red and it worked, but from code I could't manage it. In ScenicView I saw the ComboBox has three components: a StackPane a ListView and a ListCell. I want to style just the ListCell part.

enter image description here

Here is how it looks like if I add those line in my.css: As you can see I don't want the dropdown to be styled.

enter image description here

How can I solve it.

Note: the arrow should remain as it is, just that part where the text is shown, as the second screenshot shows.

Sunflame
  • 2,993
  • 4
  • 24
  • 48
  • 4
    Try `.combo-box > .list-cell { /* ... */ }`. – Slaw Apr 01 '19 at 11:05
  • @Slaw yeah, you were quicker :) Indeed, you need a child combinator - though I'm slightly astonished that the descendent relationships holds for the dropdown .. – kleopatra Apr 01 '19 at 11:13
  • 2
    @kleopatra Not completely sure how it works, but the default skin of the `ComboBox` creates an anonymous `PopupControl` that overrides `getStyleableParent`, returning the `ComboBox`. Specifically, this happens in the `ComboBoxPopupControl` class. – Slaw Apr 01 '19 at 11:25
  • @Slaw good point - thanks :) – kleopatra Apr 01 '19 at 11:47
  • @Slaw it worked, thanks ;) – Sunflame Apr 01 '19 at 12:16

0 Answers0