在 caspian.css 中搜索,我发现我可以自定义对话框 Pane 。Alert extends Dialog 所以我尝试了其中一些代码行:
.dialog-pane {
-fx-background-color: black;
-fx-padding: 0;
.....
}
.dialog-pane > .expandable-content {
-fx-padding: 0.666em; /* 8px */
.....
}
.dialog-pane > .button-bar > .container {
-fx-padding: 0.833em; /* 10px */
.....
}
.....
但没有任何变化。
问题:
我怎样才能做到这一点?我的意思是我想自定义背景、按钮、标题和其他所有内容。
看看here如何将样式表或|和styleclass添加到DialogPane,以便您可以添加您的服装css文件。
示例(图片+css代码):
.dialog-pane{
-fx-border-color:black;
-fx-border-width:2.0px;
}
/**Costumization of The Bar where the buttons are located**/
.dialog-pane > .button-bar > .container {
-fx-background-color:black;
}
.dialog-pane > .content.label {
-fx-padding: 0.5em 0.5em 0.5em 0.5em;
-fx-background-color: yellow;
-fx-text-fill:black;
-fx-font-size:15.0px;
}
/**Costumization of DialogPane Header**/
.dialog-pane:header .header-panel {
-fx-background-color: black;
}
.dialog-pane:header .header-panel .label{
-fx-background-color: yellow;
-fx-background-radius:10px;
-fx-text-fill:black;
-fx-font-size:15.0px;
}
/**Costumization of Buttons**/
.dialog-pane .button{
-fx-background-color:black;
-fx-text-fill:white;
-fx-wrap-text: true;
-fx-effect: dropshadow( three-pass-box, yellow, 10.0, 0.0, 0.0, 0.0);
-fx-cursor:hand;
}
.dialog-pane .button:hover{
-fx-background-color:white;
-fx-text-fill:black;
-fx-font-weight:bold;
}