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.

in root node css. Let me edit the question and add root node — ZafarYousafi, Feb 23 '15 at 16:47

score 1 · Answer 1 · answered Feb 23 '15 at 17:49

1

You need to apply the style to the list cells, not the list view:

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

answered Feb 23 '15 at 17:49

James_D

201,275
16
291
322

score 1 · Accepted Answer · answered Feb 23 '15 at 18:13

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;
}

JavaFx combobox dropdown list design issue

2 Answers2