JavaFx combobox dropdown list design issue

Question

I am trying to change the background color and text color for combbox and is using following style

.root 
{
    //-back:#152635;
    -darker:#272B30;
    -dark:#3A3F44;
    -normal:#52575C; // #555
    -light:#7A8288;   // #999
    -lighter:#999; // #eee
    -primary:-light;
    -success:#62c462;
    -info:#5bc0de;
    -warning:#f89406;
    -danger:#ee5f5b;
    -fore-color:#C8C8C8;
    -fx-background-color:-darker ; 
    -focused-color:#64c8c8;
    -border-color:derive(-darker,50%);
    -fx-text-fill:-fore-color;
    -fx-font-size: 14px; 
    -fx-font-weight:100;
    -fx-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;  

}


.combo-box-base {
    -fx-background-color:-dark;
    -fx-text-fill:-fore-color;
    -fx-min-width:150px; }

.combo-box-base *.arrow-button {
    -fx-background-color:derive(-dark,-10%); }

.combo-box-base *.arrow {
    -fx-background-color:-normal; }

.combo-box *.list-view {
    -fx-background-color:-normal;
    -fx-text-fill:-fore-color; }

Design looks good in Scene builder but in my application, font and background color of drop down list is not changed which is little bit surprised to me. Please help me to find out what is wrong in my css.

Answer 1

While @James_D solution works, if you override the background color you won't see hover, filled or selected pseudo classes.

This will give you the chance to define your styling for them too:

.combo-box-popup > .list-view {
    -fx-background-color: -normal; // or define other color to highlight the border
}
.combo-box-popup *.list-cell {
    -fx-background: -normal; 
    -fx-selection-bar: -light; // filled:hover
    -fx-cell-focus-inner-border: -dark; // filled:selected:hover
    -fx-text-fill: -fore-color;
}