在 JavaFX 中为警报的“显示详细信息”区域设置样式答案

【问题标题】：Styling the "show details" area of an Alert in JavaFX在 JavaFX 中为警报的“显示详细信息”区域设置样式
【发布时间】：2016-06-20 08:25:21
【问题描述】：

如何使用 CSS 设置 Alert 的 Dialog 的标记区域？请帮忙。

【问题讨论】：

标签： java css javafx dialog alert

【解决方案1】：

Alert 的 Modena.css 样式可从 ~ 第 3339 行获得 here

对于详细信息按钮，感兴趣的选择器将是：

.dialog-pane > .button-bar > .container > .details-button {
  -fx-alignment: baseline-left;
  -fx-focus-traversable: false;
  -fx-padding: 0.416em; /* 5px */
}

.dialog-pane > .button-bar > .container > .details-button.more {
    -fx-graphic: url("dialog-more-details.png");
}

.dialog-pane > .button-bar > .container > .details-button.less {
    -fx-graphic: url("dialog-fewer-details.png");
}

.dialog-pane > .button-bar > .container > .details-button:hover {
    -fx-underline: true;
}

例子：

CSS：

.dialog-pane > .button-bar > .container > .details-button.more {
    -fx-background-color: red;
}

.dialog-pane > .button-bar > .container > .details-button.less {
    -fx-background-color: green;
}

更新：

您也可以通过修改-fx-graphic来更改图片，但图片必须是您想要的尺寸。以下图片使用 24 x 24 图标

CSS：

.dialog-pane > .button-bar > .container > .details-button.more {
    -fx-graphic: url("unchecked_checkbox.png");
}

.dialog-pane > .button-bar > .container > .details-button.less {
    -fx-graphic: url("checked_checkbox.png");
}

【讨论】：

非常感谢您的回答。它就像一个魅力！我可以将按钮更改为复选框吗？
但是文字会变。如何解决这个问题？
感谢您的详细说明。但在您进行编辑之前，我已经设法做到了。我要问的是，当我们单击一个复选框时，它的 textProperty 不会改变。这里的盒子图像和文本都在变化。我希望文本保持“显示详细信息”，并且图像告诉用户它处于活动状态。
@Subhranil 所以无论对话框窗格是否展开，您都希望它始终是带有“显示详细信息”的标记复选框？
不。我希望文本“显示详细信息”保持不变并且图像发生变化。这就是复选框的作用。假设文本“显示细节”是正面的，“隐藏细节”是负面的。标记的复选框为正，未标记的为负。然后您可以看到以下任何一对“标记的复选框+隐藏详细信息”和“未标记的复选框+显示详细信息”具有相同的值。 IE。状态并没有真正改变。