css - JavaFX 组合框 css 样式

Question

我正在尝试通过 css 自定义 JavaFX 中的组合框。我无法自定义右侧的“箭头按钮”（例如，我希望它消失，或者拥有自定义图形）。

我一直在检查默认caspian.css，但是无论我对 .combo-box 部分进行什么修改，箭头按钮都不会受到影响。

知道在哪里可以编辑吗？

Answer 1

在样式表中使用以下内容CSS将摆脱所有ComboBox箭头

.combo-box .arrow, .combo-box .arrow-button{
    -fx-background-color: transparent;
}

Answer 2

使用 Scenebuilder 中的CSS Analyzer选项来获取您想要使用的任何节点的 CSS

之后，只需选择任何节点，您就会看到所有可以使用 CSS 修改的类。

现在我知道了课程，我可以在我的CSS文件中进行相应的更改

.combo-box{
    -fx-border-color:#E6E6E6;
    -fx-border-style:solid;
    -fx-border-width:1;
}
.combo-box .arrow{
    -fx-background-color:#2478E9;
}
.combo-box .arrow-button{
    -fx-background-color:white;
    -fx-border-style:none;
}
.combo-box .arrow-button{
    -fx-background-color:white;
}
.combo-box .list-cell{
    -fx-background-color:white;
}

这给了我这样的最终结果。

要对应用程序运行时发生的 CSS 和其他事件进行更高级的分析，您可以尝试Scenic View。

Answer 3

我也想让它消失。但是在我尝试以下操作之前，javafx 8 对我没有任何帮助：css：.combo-box.REFERENCEDONLY .arrow-button { -fx-padding: 0 0 0 -7; }

基本上它说：在箭头按钮的左侧使用负填充来有效地缩小它。

javafx代码：myCombobox.getStyleClass().add("REFERENCEDONLY");