如何在JavaFX中移除ColorPicker的颜色方块？

需求背景 #

我想要实现一个类似SplitMenuButton的自定义颜色选择组件：

• 左侧的"Aa"按钮：点击时将选中文本的颜色设为当前已选中的颜色
• 右侧的ColorPicker：选择新颜色时，同时更新选中文本颜色和组件的默认颜色

我已经写了对应的FXML和CSS代码，但不知道如何移除ColorPicker上自带的那个颜色方块。请问可以通过CSS、Java代码或者FXML来实现吗？

现有FXML代码 #

<HBox>
    <Button text="Aa" fx:id="colorTextButton" styleClass="leftButton" onAction="#colorText"/>
    <ColorPicker fx:id="colorPicker" styleClass="rightButton colorPicker" onAction="#setColor"/>
</HBox>

现有CSS代码 #

.leftButton {
    -fx-background-insets: 0;
    -fx-background-radius: 0.25em 0 0 0.25em;
    -fx-border-style: solid;
    -fx-border-color: #bcbcbc;
    -fx-border-width: 0.08em 0 0.08em 0.08em;
    -fx-border-radius: 0.25em 0 0 0.25em;
}

.rightButton {
    -fx-background-insets: 0;
    -fx-background-radius: 0 0.25em 0.25em 0;
    -fx-border-style: solid;
    -fx-border-color: #bcbcbc;
    -fx-border-width: 0.08em 0.08em 0.08em 0.04em;
    -fx-border-radius: 0 0.25em 0.25em 0;
}

.colorPicker {
    -fx-color-label-visible: false;
}

解决方案 #

1. CSS方式（推荐，最简洁）

ColorPicker的颜色方块是由内部的.color-box子节点渲染的，我们可以通过CSS直接隐藏它。只需要在现有的.colorPicker样式块中添加以下规则：

.colorPicker > .color-picker-label > .color-box {
    /* 完全隐藏颜色方块 */
    -fx-opacity: 0;
    /* 或者透明化背景+移除边框的替代方案 */
    /* -fx-background-color: transparent; */
    /* -fx-border-width: 0; */
}

如果想让ColorPicker的按钮风格和左侧按钮完全统一，还可以额外添加：

.colorPicker > .color-picker-button {
    -fx-background-color: white; /* 和左侧按钮背景匹配 */
    -fx-background-insets: 0;
}

2. Java代码方式（适合动态控制场景）

如果你需要在运行时动态显示/隐藏颜色方块，可以通过遍历子节点或者使用lookup()方法找到.color-box节点并修改其可见性：

// 推荐在initialize()方法中执行（确保组件已加载）
@Override
public void initialize() {
    // 方式1：遍历子节点查找
    colorPicker.getChildrenUnmodifiable().forEach(node -> {
        if (node instanceof Label) {
            Label label = (Label) node;
            label.getChildrenUnmodifiable().forEach(child -> {
                if (child.getStyleClass().contains("color-box")) {
                    child.setVisible(false);
                    child.setManaged(false); // 确保不占用布局空间
                }
            });
        }
    });

    // 方式2：更简洁的lookup方法（需组件已加入场景图）
    /*
    Node colorBox = colorPicker.lookup(".color-box");
    if (colorBox != null) {
        colorBox.setVisible(false);
        colorBox.setManaged(false);
    }
    */
}

注意：lookup()方法需要在ColorPicker已经被添加到场景图之后调用，所以放在initialize()方法末尾或者场景加载完成的回调中更稳妥。

内容的提问来源于stack exchange，提问作者MMAdams