如何使用CSS样式化JavaFX菜单及其项目？

Question

我有一个MenuBar，其在FXML中设置如下：

<MenuBar VBox.vgrow="NEVER">
    <menus>
        <Menu mnemonicParsing="true" text="_File">
            <items>
                <MenuItem mnemonicParsing="true" text="_New Project"/>
                <MenuItem mnemonicParsing="true" text="_Open…"/>
                <MenuItem mnemonicParsing="false" text="Quit"/>
            </items>
        </Menu>
    </menus>
</MenuBar>

这将生成以下菜单：

我已成功使用以下CSS样式对MenuBar和Menu File进行了样式设置：

.menu-bar { /* The menu bar itself */ }
.menu { /* The File menu item */ }
.menu:showing { /* menu when it's being shown (activated) */ }
.menu .label { /* Styles the text on a menu item */ }
.menu:showing .label { /* Styles the text on a menu item when activated */ }

然而，我无法为显示的菜单设置样式。

我尝试将其视为上下文菜单：

.context-menu {
    -fx-background-color: red;
}

没有任何作用（它不是上下文菜单，所以这里没有什么意外）。

我尝试过为menu-item和menu-button设置样式：

.menu-button,
.menu-item {
    -fx-background-color: red;
}

这将更改菜单(文件), 但不会更改菜单项或显示的菜单。

我尝试选择一个称为.items的子结构, 但似乎不存在。

问题

1. 如何选择/样式化菜单(包含新建项目、打开...、退出的容器)?
2. 如何选择/样式化菜单中的每个菜单项?

澄清

为了帮助澄清我想要样式化的元素，我添加了这张图像，它标出了我希望样式化的组件:

- crush

---

你的问题对我帮助更大，比那些回答更有用，谢谢 ;) - Chris

可能是如何为菜单按钮和菜单项设置样式的重复问题。 - Markus Weninger

Answer 1

我觉得你在 .context-menu 中忘记了使用 -fx-skin 属性。请参照如何设置菜单按钮和菜单项的样式来完成。

- Uluk Biy

---

这似乎解决了问题。非常感谢。你能简单解释一下为什么需要使用“-fx-skin”属性吗？ - crush

@crush：不必使用“-fx-skin”，请参考我的答案。但是，如果您仍然感兴趣，官方文档指出，“-fx-skin”定义了“控件皮肤的类名”。 - Markus Weninger

Answer 2

.menu-bar {
    -fx-background-color: black ;
    -fx-opacity: 0.5;
    -fx-border-width: 2.0;

}
.menu-bar .label {
    -fx-font-size: 14.0 pt;
    -fx-font-family: "Bookman Old Style";
    -fx-text-fill: white;
    -fx-font-weight: bold; 
    -fx-padding: 10.0px;

}
.menu-bar .menu-button:hover, .menu-bar .menu-button:focused, .menu-bar .menu-button:showing {
    -fx-background: black ;
    -fx-opacity: 0.5;
    -fx-text-fill: white;
}

.menu-item {
    -fx-padding: 0.0em 0.0em 0.0em 0.0em;
    -fx-text-fill: black;
    -fx-background: darkgray ;
}
.menu-item .label{
    -fx-font-size: 14.0 pt;
    -fx-text-fill: black;
}
.menu-item .label:hover{
    -fx-font-size: 14.0 pt;
    -fx-background: black ;
    -fx-text-fill: white;
}
.context-menu {
    -fx-skin: "com.sun.javafx.scene.control.skin.ContextMenuSkin";
    -fx-background-color:white ;
    -fx-border-width: 0.2px;
    -fx-border-color: black;
    /** -fx-background-insets: 0.0, 1.0, 2.0;
    -fx-background-radius: 0.0 6.0 6.0 6.0, 0.0 5.0 5.0 5.0, 0.0 4.0 4.0 4.0;
    -fx-padding: 0.333333em 0.083333em 0.666667em 0.083333em; 
    -fx-opacity: 0.9;*/
}

- Rashmin Mevada