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

【问题标题】：JavaFx combobox dropdown list design issueJavaFx 组合框下拉列表设计问题
【发布时间】：2015-02-23 16:06:03
【问题描述】：

我正在尝试更改组合框的背景颜色和文本颜色，并使用以下样式

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

Scene builder 中的设计看起来不错，但在我的应用程序中，下拉列表的字体和背景颜色没有改变，这让我有点惊讶。请帮助我找出我的 CSS 有什么问题。

【问题讨论】：

-dark、-fore-color 和 -normal 定义在哪里？
在根节点 css 中。让我编辑问题并添加根节点

标签： combobox javafx-8 ui-design

【解决方案1】：

虽然@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;
}

【讨论】：

【解决方案2】：

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

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

【讨论】：