Come pulsante del menu stile e voci di menu

Question

Ho provato a cambiare gli stili nel pulsante del menu. Potrei cambiare lo stile del pulsante del menu ma non la sua voce di menu. Indipendentemente da ciò che provo, la voce di menu all'interno del pulsante di menu rimane invariata.

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

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

Ora Come posso cambiare colore che viene lasciato fuori ??

Answer 1

MenuButton utilizza Menu internamente e ha un'API simile. In tal modo che MenuButton contiene l'elenco MenuItem s proprio come Menu. Quindi penso che devi provare a giocare con i selettori CSS .menu, .menu-button e .menu-item in caspian.css. Più specificamente con .menu-item.

EDIT: Sembra è necessario modificare il .context-menu troppo, perché il menu spuntato del 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

Questo è stato anche chiesto here e here, così ho deciso di scrivere un modello CSS per barre di menu styling.

Utilizzando questo modello CSS è un modo molto semplice per lo stile un MenuBar, il suo alto livello MenuButton voci, e 's ogni MenuButtonMenuItem bambini, vale a dire, 'tutta la barra dei menu'.

L'unica cosa che deve essere fatto è quello di registrare quattro variabili in base alle proprie esigenze:

• -fx-my-menu-color: colore di sfondo predefinito del barra dei menu (ad esempio, quando l'oggetto non è aleggiava/selezionato)
• -fx-my-menu-color-highlighted: colore di sfondo di un elemento se viene spostato/selezionato.
• -fx-my-menu-font-color: colore del font predefinito del barra dei menu (vale a dire, quando l'oggetto non è aleggiava/selezionato)
• -fx-my-menu-font-color-highlighted: colore del carattere di un elemento se si librava/selezionata.

Il file CSS completo è commentato a spiegare ogni regola definita:

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