Cómo personalizar el botón del menú y los elementos del menú

Question

He intentado cambiar los estilos en el botón de menú. Podría cambiar el estilo del botón de menú pero no su elemento de menú. No importa lo que intente, el elemento del menú dentro del botón de menú permanece sin cambios.

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

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

Ahora ¿cómo puedo cambiar el color que queda fuera ??

Answer 1

MenuButton usa Menu internamente y tiene una API similar. De tal manera que MenuButton contiene la lista de MenuItem como Menu. Por lo tanto, creo que debe intentar jugar con los selectores de CSS .menu, .menu-button y .menu-item en caspian.css. Más específicamente con .menu-item.

EDIT: Parece que necesita para cambiar el .context-menu también, porque el menú aparecido de la menubutton es 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

Esto también se ha pedido y herehere, así que decidí escribir una plantilla CSS para las barras de menús estilo.

El uso de esta plantilla CSS es una forma muy fácil de peinar un MenuBar, su alto nivel MenuButton entradas, y cada MenuButton 's MenuItem los niños, es decir, 'la totalidad barra de menús'.

Lo único que tiene que hacer es ajustar cuatro variables de acuerdo a las necesidades de uno:

• -fx-my-menu-color: color de fondo por defecto de la barra de menú (es decir, cuando el artículo no se asoma/seleccionados)
• -fx-my-menu-color-highlighted: el color de fondo de un elemento si está suspendido/seleccionado.
• -fx-my-menu-font-color: default color de fuente de la barra de menú (es decir, cuando el artículo no se asoma/seleccionado)
• -fx-my-menu-font-color-highlighted: color de la fuente de un artículo si se asoma/seleccionado.

El archivo CSS completa se comenta para explicar cada regla definida:

/* 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; 
}