无需CSS文件，如何通过编程方式设置JavaFX ComboBox样式？

你遇到的问题很常见——setStyle(String)确实只会作用于ComboBox的按钮部分，下拉列表作为独立的Popup组件，需要单独处理。下面分享几种可行的解决办法：

方法1：通过节点查找直接设置下拉列表样式 #

ComboBox的下拉列表本质是一个ListView，嵌套在Popup中。我们可以监听ComboBox的显示状态，在它弹出时找到这个ListView并设置样式：

yourComboBox.showingProperty().addListener((observable, oldValue, newValue) -> {
    if (newValue) { // 当ComboBox开始显示下拉列表时
        // 查找下拉列表的ListView组件
        ListView<?> dropDownList = (ListView<?>) yourComboBox.lookup(".list-view");
        if (dropDownList != null) {
            // 设置下拉列表的整体样式
            dropDownList.setStyle("-fx-background-color: #f5f5f5; -fx-border-color: #ccc;");
            
            // 自定义列表项的样式（可选）
            dropDownList.setCellFactory(listView -> new ListCell<>() {
                @Override
                protected void updateItem(Object item, boolean empty) {
                    super.updateItem(item, empty);
                    if (empty || item == null) {
                        setText(null);
                        setStyle("");
                    } else {
                        setText(item.toString());
                        // 设置列表项的默认样式
                        setStyle("-fx-padding: 10px 15px; -fx-background-color: #f5f5f5;");
                        // 鼠标悬停时的样式
                        hoverProperty().addListener((obs, oldHover, newHover) -> {
                            if (newHover) {
                                setStyle("-fx-padding: 10px 15px; -fx-background-color: #e0e0e0;");
                            } else {
                                setStyle("-fx-padding: 10px 15px; -fx-background-color: #f5f5f5;");
                            }
                        });
                    }
                }
            });
        }
    }
});

注意：lookup()方法需要节点已经加载到场景图中才能找到子组件，所以监听showingProperty是最稳妥的时机——此时Popup已经初始化完成。

方法2：使用外部CSS文件（推荐） #

这种方式更灵活、易维护，能同时覆盖ComboBox按钮和下拉列表的样式，避免硬编码：

1. 新建一个CSS文件（比如combo-styles.css），添加以下样式：

/* 设置ComboBox按钮部分的样式 */
.custom-combo .combo-box-base {
    -fx-background-color: #e8e8e8;
    -fx-border-radius: 4px;
    -fx-border-color: #bbb;
    -fx-padding: 6px 10px;
}

/* 设置下拉列表的整体样式 */
.custom-combo .list-view {
    -fx-background-color: #f5f5f5;
    -fx-border-color: #ccc;
    -fx-border-radius: 0 0 4px 4px;
}

/* 设置列表项的默认样式 */
.custom-combo .list-cell {
    -fx-padding: 10px 15px;
    -fx-background-color: #f5f5f5;
    -fx-text-fill: #333;
}

/* 列表项悬停时的样式 */
.custom-combo .list-cell:hover {
    -fx-background-color: #e0e0e0;
}

/* 选中项的样式 */
.custom-combo .list-cell:selected {
    -fx-background-color: #4285f4;
    -fx-text-fill: white;
}

2. 在Java代码中加载CSS并给ComboBox添加样式类：

// 加载CSS文件（确保路径正确）
yourComboBox.getStylesheets().add(getClass().getResource("combo-styles.css").toExternalForm());
// 添加自定义样式类
yourComboBox.getStyleClass().add("custom-combo");

这种方法的优势在于样式和代码分离，后续修改样式不需要改动Java代码，而且能完整覆盖ComboBox的所有组件（按钮、下拉列表、列表项）。

为什么setStyle()不生效？ #

setStyle()方法仅作用于调用它的节点本身（也就是ComboBox的按钮容器），而下拉列表是一个独立的Popup组件，属于ComboBox的子节点但不在同一个直接节点层级中，因此无法通过父节点的setStyle()直接影响它。

内容的提问来源于stack exchange，提问作者Jesus Alonso Figueroa Urias