Javafx

Question

我已经在 SO 中进行了谷歌搜索，但不幸的是，我没有找到如何制作 不可编辑的组合框 包含 文本字段的方法白色背景 通过 css.

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

代码：

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

无效。

有人可以帮忙吗？

Answer 1

我不确定这是否是您想要的，因为我无法想象"not editable combobox with a textfield"但也许它们之间有一个逗号？

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

这是我的输出：

这是您要找的吗？

Answer 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)；

3-d 样式采用默认样式中的大 css。

Answer 3

我的项目需要这个。我希望你没有像我一样一直在用头撞...

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

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

Javafx - 组合框文本字段背景色

Javafx - combo-box text-field bg color

java