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。

谢谢。

- user2805346

---

你可以使用 CSS 来实现这个功能。请编辑你的问题，描述你想要改变的内容，展示你尝试过的方法，并解释结果与你期望的不同之处。 - James_D

抱歉 @James_D，已更新 - user2805346

你需要设置单元格的样式，而不是下拉框本身。你只能在外部样式表中进行设置（不能使用内联样式）。 - James_D

你可以提供一个例子吗？ - user2805346

Answer 1

这里有几点解释：

请注意：

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

}

- Bo Halim

---

非常感谢。这完美无缺！ - user2805346

其实 James_D 应该得到它 :) - Bo Halim

我查了很多不起作用的例子。这个例子可以，而且全部都是CSS。谢谢！ - Adrian Bartyczak

Answer 2

您可以通过在应用程序的外部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文档，甚至是源代码以获得更多选项。

- James_D

---

非常感谢。这个程序正在运行！ - user2805346