在JavaFX中设置Alert的“show details”区域的样式

Question

如何使用CSS为Alert的{​​{1}}标记区域设置样式？请帮忙。

Answer 1

来自〜第3339行的Alert的Modena.css样式可用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");
}