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

【问题标题】：Javafx - combo-box text-field bg colorJavafx - 组合框文本字段 bg 颜色
【发布时间】：2015-04-20 16:29:45
【问题描述】：

我在 SO 中进行了谷歌搜索和搜索，但不幸的是，我没有找到如何通过.

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

代码：

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

没用。

有人可以帮忙吗？

【问题讨论】：

@Uluk Biy 好的。我可以使用和ChoiseBox，但是如何制作具有白背景的ChoiseBox？
下面的答案呢？

标签： java javafx

【解决方案1】：

我在一个项目中需要这个。我希望你没有像我那样用头撞它……

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

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

【讨论】：

糟糕，误会了。以为您要求禁用组合框。

【解决方案2】：

你可以添加这个css：

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

但是要从可编辑的组合框中获取所有样式，您必须从 /jfxrt.jar!/com/sun/javafx/scene/control/skin/modena/modena.css 中找到 .combo-box-base:editable 并将 .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;
}

结果如下：

只有 2 行样式的第一个框

2-nd 有 testComboBox2.setEditable(true);

使用默认样式的大 css 进行 3-d 样式。

【讨论】：

【解决方案3】：

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

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

这是我的输出：

这是你要找的吗？

【讨论】：

不，不一样。因为您的箭头不像可编辑的那样。除了你失去焦点颜色。