JavaFX ComboBox CSS 样式

Posted 2023-02-26

【中文标题】JavaFX ComboBox CSS 样式

【英文标题】：JavaFX ComboBox CSS style

【发布时间】：2016-11-21 02:51:18

【问题描述】：

我正在使用 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，所以也许我完全错过了一些东西。是组合框没有定义边框吗？所以我必须覆盖边界并找出文本字段的边界是什么？

【问题讨论】：

你试过-fx-border: 1px solid grey;或text-field我认为是在JavaFX中

【参考方案1】：

ComboBoxinherits its CSS style 来自ComboBoxBase。

ComboBox 控件具有以下所有属性和伪类 组合框基础。

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 会使所有这些控件共享相同的样式，从而实现更加统一的设计。

【讨论】：

会试试的！我在想我也可以覆盖 - fx-body-color，但我想它被用于很多 UI 控件......

像魅力一样工作 :) 谢谢！

【参考方案2】：

您可以添加以下属性来控制边框：

-fx-border-color: #D3D3D3
-fx-border-width: 1 1 1 1

【讨论】：

所以基本上覆盖定义中的边框以打印它们，但通常确定它们会以与文本字段相同的方式显示？