javafx - styling pop up windows

问题:

I have a ComboBox, and I can style it via css. However, the combo-box-popup component of the ComboBox cannot be styled from the same css file.

My theory is, the popup window of the ComboBox is not a part of the current scene (since it is a new window), and since the css file is added to the list of the stylesheets of the containing AnchorPane, I need to somehow add this css file to the list of the stylesheets of the popup window.

I faced the same problem a few months ago while styling a Tooltip.

How can I style the combo-box-popup component?

回答1:

> How can I style the combo-box-popup component?

It depends on which properties of the popup do you want to style. Since it has own subnodes as well, you need to style them instead:

 - combo-box-popup : a PopupControl that is displayed when the button is pressed  
     - list-view : a ListView  
         - list-cell : a ListCell

caspian.css uses these default values:

.combo-box-popup .list-view {
    -fx-background-color: -fx-box-border, -fx-control-inner-background;
    -fx-background-insets: 0, 1;
    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 8, 0.0 , 0 , 0 );
}

.combo-box-popup .list-view .list-cell {
    -fx-padding: 4 0 4 5;

    /* No alternate highlighting */
    -fx-background-color: -fx-control-inner-background;
}

.combo-box-popup .list-view .list-cell:filled:selected, .combo-box-popup .list-view .list-cell:filled:selected:hover {
    -fx-background: -fx-accent;
    -fx-background-color: -fx-selection-bar;
    -fx-text-fill: -fx-selection-bar-text;
}

.combo-box-popup .list-view .list-cell:filled:hover {
    -fx-background-color: -fx-cell-hover-color;
    -fx-text-fill: -fx-text-inner-color;
}

> My theory is, the popup window of the ComboBox is not a part of the current scene (since it is a new window), and since the css file is added to the list of the stylesheets of the containing AnchorPane

No, it is a part of the scene. The PopupControl cannot be shown without an owner, however you are right about that the .combo-box-popup is not being applied when the css stylesheet is added to the layout instead of the scene. I think that is a bug and you can file it. Workaround for now is to add directly to the scene:

scene.getStylesheets().add(getClass().getResource("style.css").toExternalForm());