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

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; 
}

你会得到这个: