Javafx - 组合框文本字段bg颜色

Question

我在谷歌搜索并搜索过但不幸的是，我没有找到如何使不可编辑的组合框包含带有白色背景的文本字段的方法的CSS。

换句话说，如何使不可编辑的组合框看起来像可编辑的组合框（即相同的焦点，箭头按钮等）？

代码：

.combo-box .text-field{
    -fx-background-color: white;
}

不起作用。

有人可以帮忙吗？

Answer 1

你可以添加这个css：

.combo-box > .list-cell{
    -fx-background-color: -fx-outer-border, white;
    -fx-background-insets: 1 -3 1 1, 1 -2 1 1 ;
}

但要从可编辑的组合框中获取所有样式，您必须从.combo-box-base:editable中找到/jfxrt.jar!/com/sun/javafx/scene/control/skin/modena/modena.css并将.text-field替换为.list-cell，因为只有可编辑的组合框具有.text-field

.combo-box > .arrow-button {
    -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
    -fx-background-insets: 0 0 -1 0, 0, 1, 2;
    -fx-background-radius: 3px, 3px, 2px, 1px;
    -fx-padding: 0.333333em 0.666667em 0.333333em 0.666667em; /* 4 8 4 8 */
    -fx-text-fill: -fx-text-base-color;
    -fx-alignment: CENTER;
    -fx-content-display: LEFT;
}

.combo-box  > .arrow-button{
    -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
    -fx-background-insets: 1 1 1 0, 1, 2;
    -fx-background-radius: 0 3 3 0, 0 2 2 0, 0 1 1 0;
}
.combo-box > .list-cell {
    -fx-background-color:
    linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
    linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
    -fx-background-insets: 1 0 1 1;
    -fx-background-radius: 2 0 0 2;
}
.combo-box:contains-focus {
    -fx-background-color: -fx-focus-color;
    -fx-background-insets: -0.2;
    -fx-background-radius: 3;
}
.combo-box:focused > .list-cell{
    -fx-background-color:
    -fx-control-inner-background,
    -fx-faint-focus-color,
    linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
    -fx-background-insets: 1 0 1 1, 1 0 1 1, 3 2 3 3;
    -fx-background-radius: 2 0 0 2, 1 0 0 1, 0;
}

.combo-box :contains-focus > .arrow-button{
    -fx-background-color: -fx-inner-border, -fx-body-color, -fx-faint-focus-color, -fx-body-color;
    -fx-background-insets: 1, 2, 1, 2.6;
    -fx-background-radius: 0 2 2 0, 0 1 1 0, 0 1 1 0, 0 1 1 0;
}

结果如下：

1-box盒子只有2行

2-nd有testComboBox2.setEditable（true）;

3-d使用默认样式的大css设置。

Answer 2

我不确定这是否是你想要的，因为我无法想象“不能用文本字段编辑组合框”但可能是它们之间的逗号？

.combo-box, .text-field{
-fx-background-color: white;
}

这是我的输出：

这是你在找什么？

Answer 3

我需要这个项目。我希望你只要我这样做就没有砸过它......

.combo-box:disabled, .combo-box:disabled > .text-field {
    -fx-opacity: 1.0;
}

然后，如果您的ComboBox被禁用，它将看起来正常，但您无法使用下拉菜单或输入可编辑的文本字段。