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

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

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

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

Answer 3

使用Scenebuilder中的 CSS Analyser 选项获取要与之一起使用的任何节点的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。