如何樣式菜單按鈕和菜單項

Question

我試圖改變菜單按鈕中的樣式。我可以改變菜單按鈕的風格，但不是它的菜單項。 無論我嘗試菜單項內的菜單項保持不變。

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

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

現在我怎樣才能改變這種狀況留出彩？

Answer 1

MenuButton內部使用Menu並具有類似的API。 MenuButton包含MenuItem的列表，就像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 */ 
} 

Answer 2

這也被要求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; 
}