Question

我正在尝试更改combbox的背景颜色和文字颜色，并使用以下样式

.root 
{
    //-back:#152635;
    -darker:#272B30;
    -dark:#3A3F44;
    -normal:#52575C; // #555
    -light:#7A8288;   // #999
    -lighter:#999; // #eee
    -primary:-light;
    -success:#62c462;
    -info:#5bc0de;
    -warning:#f89406;
    -danger:#ee5f5b;
    -fore-color:#C8C8C8;
    -fx-background-color:-darker ; 
    -focused-color:#64c8c8;
    -border-color:derive(-darker,50%);
    -fx-text-fill:-fore-color;
    -fx-font-size: 14px; 
    -fx-font-weight:100;
    -fx-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;  

}


.combo-box-base {
    -fx-background-color:-dark;
    -fx-text-fill:-fore-color;
    -fx-min-width:150px; }

.combo-box-base *.arrow-button {
    -fx-background-color:derive(-dark,-10%); }

.combo-box-base *.arrow {
    -fx-background-color:-normal; }

.combo-box *.list-view {
    -fx-background-color:-normal;
    -fx-text-fill:-fore-color; }

设计在“场景”构建器中看起来不错，但在我的应用程序中，下拉列表的字体和背景颜色没有改变，这对我来说有点意外。请帮我弄清楚我的CSS中有什么问题。

Answer 1

您需要将样式应用于列表单元格，而不是列表视图：

.combo-box *.list-view .list-cell {
    -fx-background-color:-normal;
    -fx-text-fill:-fore-color; }

Answer 2

虽然@James_D解决方案有效，但如果覆盖背景颜色，则无法看到悬停，填充或选定的伪类。

这将使您有机会为他们定义样式：

.combo-box-popup > .list-view {
    -fx-background-color: -normal; // or define other color to highlight the border
}
.combo-box-popup *.list-cell {
    -fx-background: -normal; 
    -fx-selection-bar: -light; // filled:hover
    -fx-cell-focus-inner-border: -dark; // filled:selected:hover
    -fx-text-fill: -fore-color;
}

JavaFx组合框下拉列表设计问题

2 个答案: