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

Question

我已经尝试过所有尝试删除它，它看起来不像是分割窗格或分隔符。

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

我所拥有的所有代码都是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弹出窗口的较大高度，可以很容易地看出它不仅仅是一行，而是listview的非填充内容：

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

然后你的组合框将如下所示：

因此，解决方案是通过添加此样式来着色该区域：

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

你会得到这个：