[FIXED] Style ChoiceBox list with CSS in JavaFX

Issue

How do I access this list in css or in code in order to style it. I couldn't figure it out from modena.css.

By using

.choice-box > * {
    -fx-background-color: black;
}

the list is unaffected, so it is some kind of separate control.

Solution

The following selectors should do the coloring in the context menu of the ChoiceBox:

// Background color of the whole context menu
.choice-box .context-menu { -fx-background-color: black; }
// Focused item background color in the list
.choice-box .menu-item:focused { -fx-background-color: orange; }
// Text color of non-focused items in the list
.choice-box .menu-item > .label { -fx-text-fill: white; }
// Text color of focused item in the list
.choice-box .menu-item:focused > .label { -fx-text-fill: black; }

If you color the ChoiceBox further:

// Background color of the control itself
.choice-box {
  -fx-background-color: black;
  -fx-mark-color: orange; // arrow color
}

// Selected item text color on the control itself
.choice-box > .label { -fx-text-fill: white; }

The result will be a ChoiceBox like this:

Answered By - DVarga
Answer Checked By - David Goodson (JavaFixing Volunteer)