如何设置菜单按钮和菜单项的样式

Posted 2023-02-19

【中文标题】如何设置菜单按钮和菜单项的样式

【英文标题】：How to style menu button and menu items

【发布时间】：2012-08-31 05:15:34

【问题描述】：

我尝试更改菜单按钮的样式。我可以更改菜单按钮样式，但不能更改其菜单项。 无论我尝试什么菜单按钮内的菜单项都保持不变。

.menu-button 
 -fx-background-color:black;


.menu-button .label 
 -fx-background-color:black; 

现在我怎样才能改变遗漏的颜色？

【参考方案1】：

here 和 here 也有人问过这个问题，所以我决定为菜单栏的样式编写一个 CSS 模板。

使用这个 CSS 模板是设置MenuBar、其***MenuButton 条目以及每个MenuButton 的MenuItem 子项（即“整个菜单栏”）的一种非常简单的方法。

唯一要做的就是根据自己的需要调整四个变量：

-fx-my-menu-color：菜单栏的默认背景颜色（即，当项目未悬停/选择时） -fx-my-menu-color-highlighted: 悬停/选中的项目的背景颜色。 -fx-my-menu-font-color: 菜单栏的默认字体颜色（即项目未悬停/选中时） -fx-my-menu-font-color-highlighted: 悬停/选中项目的字体颜色。

对完整的 CSS 文件进行注释以解释每个定义的规则：

/* VARIABLE DEFINITIONS: Only these 4 variables have to be adjusted, the rest is copy-paste */
* 
    -fx-my-menu-color: #263238;                  /* Change according to your needs */
    -fx-my-menu-color-highlighted: #455a64;      /* Change according to your needs */
    -fx-my-menu-font-color: #FFFFFF;             /* Change according to your needs */
    -fx-my-menu-font-color-highlighted: #FFFFFF; /* Change according to your needs */


/* MENU BAR + Top-level MENU BUTTONS */
/*** The menu bar itself ***/    
.menu-bar 
    -fx-background-color: -fx-my-menu-color;


/*** Top-level menu itself (not selected / hovered) ***/
.menu-bar > .container > .menu-button 
    -fx-background-color: -fx-my-menu-color;


/*** Top-level menu's label (not selected / hovered) ***/
.menu-bar > .container > .menu-button > .label 
    -fx-text-fill: -fx-my-menu-font-color;


/*** Top-level menu's label (disabled) ***/
.menu-bar > .container > .menu-button > .label:disabled 
    -fx-opacity: 1.0;


/*** Top-level menu itself (selected / hovered) ***/
.menu-bar > .container > .menu-button:hover,
.menu-bar > .container > .menu-button:focused,
.menu-bar > .container > .menu-button:showing 
    -fx-background-color: -fx-my-menu-color-highlighted;


/*** Top-level menu's label (selected / hovered) ***/
.menu-bar > .container > .menu-button:hover > .label,
.menu-bar > .container > .menu-button:focused > .label,
.menu-bar > .container > .menu-button:showing > .label 
    -fx-text-fill: -fx-my-menu-font-color-highlighted;


/* MENU ITEM (children of a MENU BUTTON) */
/*** The item itself (not hovered / focused) ***/    
.menu-item 
    -fx-background-color: -fx-my-menu-color; 


/*** The item's label (not hovered / focused) ***/   
.menu-item .label 
    -fx-text-fill: -fx-my-menu-font-color;


/*** The item's label (disabled) ***/   
.menu-item .label:disabled 
    -fx-opacity: 1.0;
    

/*** The item itself (hovered / focused) ***/    
.menu-item:focused, .menu-item:hovered 
    -fx-background-color: -fx-my-menu-color-highlighted; 


/*** The item's label (hovered / focused) ***/  
.menu-item:focused .label, .menu-item:hovered .label 
    -fx-text-fill: -fx-my-menu-font-color-highlighted;


/* CONTEXT MENU */
/*** The context menu that contains a menu's menu items ***/  
.context-menu 
    -fx-background-color: -fx-my-menu-color; 

【讨论】：

这可行，但它将菜单栏中的所有条目更改为相同的颜色。有没有办法将每个条目更改为不同的颜色？

@Tony 我不确定您所说的条目是什么意思，但您可以将id 分配给menu-bar / menu-button 并在CSS 中使用@ 引用它987654336@ 而不是 .menu-bar / .menu-button 其余部分保持不变，例如 #myMenuButton .menu-item:focused ....。

【参考方案2】：

MenuButton 在内部使用 Menu 并具有类似的 API。这样MenuButton 包含MenuItems 列表，就像Menu 一样。所以我认为你需要尝试在 caspian.css 中使用 .menu、.menu-button 和 .menu-item CSS 选择器。更具体地说是.menu-item。

编辑：看来你也需要更改.context-menu，因为menuButton的弹出菜单是ContextMenu。

.menu-item .label 
    -fx-text-fill: white;


.menu-item:focused 
     -fx-background-color: darkgray;


.menu-item:focused .label 
    -fx-text-fill: blue;


.context-menu 
    -fx-skin: "com.sun.javafx.scene.control.skin.ContextMenuSkin";
    -fx-background-color: black;
    -fx-background-insets: 0, 1, 2;
    -fx-background-radius: 0 6 6 6, 0 5 5 5, 0 4 4 4;
/*    -fx-padding: 0.666667em 0.083333em 0.666667em 0.083333em;  8 1 8 1 */
    -fx-padding: 0.333333em 0.083333em 0.666667em 0.083333em; /* 4 1 8 1 */