JavaFX 选择对话框 CSS

Question

我的 JavaFX 应用程序中有一个 ChoiceDialog，我一生都无法弄清楚需要哪些 CSS 元素来改变它的外观和感觉。我的其他对话框窗格似乎受到我的外部 CSS 文件的影响，所以我猜这是我不熟悉的元素。

另外，这将覆盖 modena css。

我试过了：

.dialog-pane {
-fx-background-color: black;
}

.dialog-pane .label {
-fx-text-fill: white;
}

.dialog-pane:header .header-panel {
-fx-background-color: black;
}

.dialog-pane:header .header-panel .label {
-fx-font-style: italic;
-fx-font-size: 2em;
}

我也试过了：

.choice-dialog .dialog-pane {
-fx-background-color: black;
}

.choice-dialog .dialog-pane .label {
-fx-text-fill: white;
}

.choice-dialog .dialog-pane:header .header-panel {
-fx-background-color: black;
}

.choice-dialog .dialog-pane:header .header-panel .label {
-fx-font-style: italic;
-fx-font-size: 2em;
}

以及这 2 个的其他一些变体（.choice-dialog 和 .dialog-pane） 我尝试的另一件事（查看 modena.css 文件后）是通过执行以下操作来更改 ChoiceDialog 中显示的图标：

来自

.choice-dialog.dialog-pane {
-fx-graphic: url("dialog-confirm.png");
}

到

.choice-dialog.dialog-pane {
-fx-graphic: url("dialog-warning.png");
}

虽然这也没有产生任何结果。

更新

我更新了我的自定义 CSS 文件，将其全部删除并重试了上述 CSS。 CSS 的第一个块仅更改 DialogPane，而不是 ChoiceDialog。第二个和第三个什么都没做。

这是我用来创建 ChoiceDialog 的代码

ChoiceDialog<String> dialog = new ChoiceDialog<>("district", choices);
dialog.setTitle("Object Selection");
dialog.setHeaderText("Which object should the file inherit from?");
dialog.setContentText("Default Object:");

Stage dialogStage = (Stage) dialog.getDialogPane().getScene().getWindow();
dialogStage.getIcons().add(icon);
dialogStage.initOwner(stage);

Optional<String> response = dialog.showAndWait();
response.ifPresent(chosen ->
{
    //It does something...
});

Dialog<ObservableList<DataFilter>> dialog = new Dialog<>();
dialog.getDialogPane().setPrefSize(620, 430);
dialog.setTitle("Field Filter");
dialog.getDialogPane().getButtonTypes().addAll(save_bt, cancel_bt);
dialog.initOwner(stage);
dialog.setResultConverter((ButtonType b) ->
{
    if (b == save_bt)
    {
        return FXCollections.observableArrayList(dataFilters);
    }
    return null;
 });

 Stage stage = (Stage) dialog.getDialogPane().getScene().getWindow();
 stage.getIcons().add(icon);

Answer 1

花了我一个小时的实验。其他几个选择器位于 modena.css 中的“基于默认列表视图的组合框的样式”下

.dialog-pane{
-fx-background-color: #7160DC;
   }
 .dialog-pane > *.button-bar > *.container{
 -fx-background-color: #7160DC;
  }
  .dialog-pane > .content .label{
  -fx-font-size: 15px;
  -fx-font-weight: bold;
   -fx-text-fill: orange;
   }
  .dialog-pane:header .header-panel{
   -fx-background-color: #9589DF;
    }
    .dialog-pane:header .header-panel .label{
    -fx-font-size: 18px;
    -fx-font-style: italic;
     }

   .button{
    -fx-background-color:black;
    -fx-text-fill:white;
    }

  .button:hover{     
  -fx-background-color:orange;
   -fx-text-fill:black;
   -fx-font-weight:bold; 
   }

   /* styles background of cover choice*/
   .combo-box {
  -fx-background-color: black;
  -fx-font-weight: bold;
   }
  /* styles text of cover choice*/
  .combo-box > .list-cell {
  -fx-text-fill: yellow;
  }

 .combo-box-popup > .list-view {
-fx-background-color:black;
-fx-background-insets: 0, 1;
-fx-effect: dropshadow( gaussian , rgba(0,0,0,0.2) , 12, 0.0 , 0 , 8 );
 }

.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet >  .list-cell {
-fx-padding: 4 0 4 5;
-fx-background: black;
}

.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet   
> .list-cell:filled:hover {
-fx-background-color: orange;
 -fx-text-fill: black;
 }

 //add the above .css file as stylesheet

ChoiceDialog dialog = new ChoiceDialog();
    dialog.setTitle("Confirmation");
    dialog.setContentText("Some Text");
    DialogPane dp = dialog.getDialogPane();
    dp.getStylesheets().add(getClass().getResource("myCssFile.css")
    .toExternalForm());
    Optional<String> result = dialog.showAndWait();