如何在 CSS 中设置 JavaFX 菜单及其项目的样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21912946/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I style a JavaFX menu and its items in CSS?
提问by crush
I've got a MenuBar that is setup as follows in FXML:
我有一个在 FXML 中设置如下的 MenuBar：
<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>
This produces a menu as follows:
这会产生一个菜单如下：
I've successfully styled the MenuBarand the MenuFilewith the following CSS:
我已经使用以下 CSS成功地设计了MenuBar和Menu文件：
.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 */ }
However, I've been unable to style the menu that is displayed.
但是，我一直无法为显示的菜单设置样式。
I've tried treating it as a ContextMenu:
我尝试将其视为 ContextMenu：
.context-menu {
-fx-background-color: red;
}
Doesn't do anything (it's not a ContextMenu, so no big surprise here).
不做任何事情（它不是 ContextMenu，所以这里没有什么大惊喜）。
I've tried styling menu-itemand menu-button:
我试过造型menu-item和menu-button：
.menu-button,
.menu-item {
-fx-background-color: red;
}
This changes the menu (File), but not the menu items or the menu that is displayed.
这会更改菜单 ( File)，但不会更改菜单项或显示的菜单。
I've tried selecting a substructurecalled .itemsbut that doesn't seem to exist.
我试过选择一个名为的子结构，.items但它似乎不存在。
Questions
问题
- How do I select/style the menu (the container that is holding New Project, Open..., Quit)?
- How do I select/style each individual MenuItem in the menu?
- 如何选择/设置菜单样式（包含New Project、Open...、Quit的容器）？
- 如何在菜单中选择/设置每个单独的 MenuItem 样式？
Clarification
澄清
To help clarify which elements I'm looking to style, I've added this image which outlines the components I'm wishing to style:
为了帮助澄清我想要设计的元素，我添加了这张图片，其中概述了我希望设计的组件：
采纳答案by Uluk Biy
I think you forgot the -fx-skinproperty in .context-menu.
Follow the How to style menu button and menu items.
我想你忘记了-fx-skin财产.context-menu。
按照如何设置菜单按钮和菜单项的样式。
回答by Rashmin Mevada
.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;*/
}
