JavaFX 组合框 CSS 样式

Question

我正在使用 JavaFX + FXML 构建一个小型应用程序，我正在尝试实现一些简单的 CSS 以具有特定的样式。

我对 Combobox 元素有疑问。事实上，默认情况下它的颜色是灰色的:

而且我想让它变成白色(或透明)，并保留边框，以匹配与文本字段相同的样式。所以我尝试将背景颜色设置为透明，但有一个副作用:边框也变得透明!

这是我添加的 CSS:

.root {
    -fx-font-size: 11pt;
    -fx-font-family: "Verdana";
    -fx-background: #FFFFFF;
}

.normal-label {
    -fx-text-fill: #005EB8;
}

.normal-text-field {
    -fx-text-fill: #333333;
}

.combo-box {
    -fx-background-color: transparent;
}

我完全不习惯写 CSS，所以可能我完全漏掉了一些东西。是组合框没有定义边框吗？所以我必须覆盖边框并找出文本字段的边框是什么？

Answer 1

组合框 inherits its CSS style来自 ComboBoxBase .

The ComboBox control has all the properties and pseudo‑classes of ComboBoxBase.

ComboBoxBase 的默认 CSS 样式类定义为:

.combo-box-base {
    -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-base {
    -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, white;
    -fx-background-insets: 0 0 -1 0, 0, 1, 2;
    -fx-background-radius: 3px, 3px, 2px, 1px;
}

这个样式类只是将内部设置为白色，边框实际上没有被触及(删除最后两个属性然后你将得到一个纯白色的无边框 ComboBox)。

---

注意:

如果仅使用 ComboBoxes，覆盖 .combo-box-base 或 .combo-box 样式类是等效的。

答案中使用 .combo-box-base 样式类而不是其他样式类的原因是还有其他控件也继承了 .combo-box-base 样式类，例如 ColorPicker和 DatePicker .覆盖 .combo-box-base 可以让所有这些控件共享相同的样式，从而实现非常统一的设计。