Comment styliser le menu et les éléments de menu

J'ai essayé de changer les styles de bouton de menu. Je pourrais changer le bouton de menu de style, mais pas son élément de menu.
Peu importe ce que j'essaie de menu élément de menu, le bouton reste inchangé.

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

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

Maintenant, comment puis-je changer la couleur qui est à gauche??

source d'informationauteur Vinod CG

MenuButton utilise Menu à l'interne et dispose d'une API similaire. De telle façon que MenuButton contient MenuItemla liste de tout comme Menu. Donc, je pense que vous devez essayer de jouer avec .menu.menu-button et .menu-item sélecteurs CSS dans la mer caspienne.css. Plus spécifiquement,.menu-item.

EDIT: Il semble que vous avez besoin de changer la .context-menu trop, parce que l'surgi menu de la menuButton est 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 */
}

Cela a également été demandé ici et icij'ai donc décidé d'écrire un modèle CSS pour le style des barres de menu.

L'utilisation de ce modèle CSS est un moyen très facile pour un style MenuBarson haut niveau de MenuButton entrées, et chaque MenuButton's MenuItem enfants, je.e, "l'ensemble de la barre de menu".

La seule chose qui a à faire est d'ajuster les quatre variables selon les besoins:

-fx-my-menu-color: La barre de menu couleur de fond par défaut (c'est à dire, lorsque l'élément n'est pas plané /sélectionné)
-fx-my-menu-color-highlighted: Un élément de la couleur d'arrière-plan si elle est planait /sélectionné.
-fx-my-menu-font-color: La barre de menu par défaut de la couleur de la police (c'est à dire, lorsque l'élément n'est pas plané /sélectionné)
-fx-my-menu-font-color-highlighted: Un élément de la couleur de la police si il est a plané /sélectionné.

Complète du fichier CSS est commentée pour expliquer chaque règle définie:

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

Vous devez vous connecter pour publier un commentaire.