CODEWITHSUNDEEP
javacssjavafx
user2805346
user2805346

Reputation: 312

JavaFx ComboBox customize dropdown menu

I want to customize the dropdown menu of a combo bar. Looking at the next image enter image description here

I would like to change the blue hover bar, the hovered text color, text font as well as default text font.

Thank you very much.

-UPDATED-

I only achieved this 

   comboBox.setStyle("-fx-background-image: url('" + ImageUtils.getPath() + "fieldTextBkg.png');"
            + "-fx-text-box-border: transparent;" 
            + "-fx-background-color: transparent, transparent, transparent, transparent;"
            + "-fx-text-alignment: center;");

that is only changing the unfolded menu. Whatever I am trying in order to modify the inner dropdown list, I am not possible to achieve. A start will be for example, the blue bar to be changed into Green. The whole background instead of white to be black, and text to be of font Calibri.

Thank you.

Upvotes: 6

Views: 8225

Answers (2)

James_D
James_D

Reputation: 209299

You can change the style for the cells in the popup by placing the following in an external CSS file for your application:

.combo-box .combo-box-popup .list-view, .combo-box .combo-box-popup .list-cell {
    -fx-background-color: black ;
    -fx-text-fill: white ;
    -fx-font-family: "Calibri" ;
}
.combo-box .combo-box-popup .list-cell:hover {
    -fx-text-fill: yellow ;
    -fx-background-color: green ;
}

You can use the pseudoclass :selected for the selected cell. (i.e. .combo-box .combo-box-popup .list-cell:selected { ... }).

You can style the combo box "button cell" (i.e the one that is displayed not in the popup) with the selector

.combo-box > .list-cell { /* ... */ }

See the CSS documentation or even the source code for the default stylesheet for more options.

Upvotes: 6

Bo Halim
Bo Halim

Reputation: 1776

Here's a few explication :

 /*Edit The control itself*/
 .combo-box{

-fx-background-color:purple; 

 }

/*Edit Normal Cell color */
 .combo-box .list-cell{

-fx-background-color:red;


}

/*Edit Cell Color Only when cursor hover cell */
.combo-box .list-cell:hover{

-fx-background-color:green;
}

/*Edit Cell Color Only when selected */
.combo-box .list-cell:selected{

-fx-background-color:blue; 

}

Upvotes: 10

Related Questions