在每个CSS中更改JavaFX CustomColorDialog的样式时遇到问题

Question

这是我现在的CustomColorDialog：

正如你所看到的那样，有一个白色的字段，我已经尝试改变它甚至不能使用的那个字段的颜色：

$( document ).ready(function() {

    $( "#myRadio" ).click(function() {
        if( $(this).is(':checked') ){

            // if you want to change your Div's Display None
            $("#myDiv").hide();

        }else{

            // if you want to change your Div's Display BLOCK
            $("#myDiv").show();

        }
    });

});

我怎么知道这是一个地区？我使用了ScenicView来查看对话框结构，它甚至告诉我样式，区域样式类是“customcolor-controls-background”。我也尝试过使用样式，但是它不起作用，为什么.region { -fx-background-color:red; } 甚至不起作用呢？

Answer 1

如果查看modena.css文件（jfxrt.jar中捆绑的），您就会了解应用于CustomColorDialog控件的所有样式。

至于白色区域，你会发现：

.custom-color-dialog .controls-pane .customcolor-controls-background {
    -fx-background-color: -fx-text-box-border, -fx-control-inner-background;
    -fx-background-insets: 
        0.8333333em 0 0.4166667em 0,
        1em 0.166667em 0.5833333em 0.166667em;
    -fx-background-radius: 0.3333333em, 0.166667em;
}

所以你要做的就是覆盖css文件中的规则：

.custom-color-dialog .controls-pane .customcolor-controls-background {
    -fx-background-color: red;
}