css - 为什么这个组合框的底部有一行？

Question

我已经尝试了所有方法来尝试删除它，它看起来也不像是分割 Pane 或分隔符。

添加了一些填充以更好地显示它:

我所有的代码都是 ComboBox<String>添加了元素，无需显示。至于 css，我有这个:

.combo-box {
    -fx-focus-color: transparent;
    -fx-background-insets: -1, -1, -1, -1;
}

.combo-box .list-cell {
    -fx-text-fill: white;
}

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

.combo-box-base .arrow {
    -fx-shape: "M8.124,13.625l4.125-3.375v2.889l-4.125,3.86L4,13.139V10.25L8.124,13.625z";
    -fx-background-color: white;
}

.combo-box-popup .list-view {
    -fx-effect: null;
}

和

.combo-box {
    -fx-background-color: #2B545E;
    -fx-background-radius: 0;
}

.combo-box-popup .list-view {
    -fx-background-color: #2B545E;
}

.combo-box-popup .list-view .list-cell:filled {
    -fx-background-color: #2B545E;
}

.combo-box-popup .list-view .list-cell:filled:hover {
    -fx-background-color: #2E5A66;
}

.combo-box-popup .list-view .list-cell:filled:selected {
    -fx-background-color: #346673;
}

使用 Application.STYLESHEET_CASPIAN .

Answer 1

问题是这种风格:.combo-box-base .list-view .cell

通过指定更大的listview popup高度，可以很容易看出不是一行，而是listview未填充的内容:

.combo-box-popup .list-view {
    -fx-pref-height:200;
}

然后您的组合框将如下所示:

因此解决方案是通过添加此样式为该区域着色:

.combo-box-base .list-view .cell  {
    -fx-background-color: #2B545E; 
}

你会得到这个: