JavaFx ComboBox自定义下拉菜单

Question

我想自定义组合栏的下拉菜单。查看下一张图片

我想更改蓝色悬停条，悬停文本颜色，文本字体以及默认文本字体。

非常感谢。

- 更新 -

我只实现了这个

   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;");

只是更改展开的菜单。无论我为了修改内部下拉列表而尝试什么，我都无法实现。例如，一个开始将蓝色条变为绿色。整个背景而不是白色为黑色，文本为字体Calibri。

谢谢。

Answer 1

您可以通过将以下内容放入应用程序的外部CSS文件中来更改弹出窗格中单元格的样式：

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

您可以将伪类:selected用于所选单元格。 （即.combo-box .combo-box-popup .list-cell:selected { ... }）。

您可以使用选择器设置组合框“按钮单元格”（即不在弹出窗口中显示的那个）

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

有关更多选项，请参阅CSS documentation甚至source code以获取默认样式表。

Answer 2

以下是一些解释：

 /*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; 

}