Sposób stylizowania przycisku menu i elementów menu

Question

Próbowałem zmienić styl w przycisku menu. Mógłbym zmienić styl przycisku menu, ale nie jego pozycji menu. Bez względu na to, co próbuję, pozycja menu wewnątrz przycisku menu pozostaje niezmieniona.

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

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

Teraz w jaki sposób można zmienić kolor, który jest pozostawione na zewnątrz ??

Answer 1

MenuButton używa wewnętrznie i ma podobne API. W taki sposób, że MenuButton zawiera listę MenuItem, podobnie jak Menu. Więc myślę, że musisz spróbować grać z .menu, .menu-button i .menu-item selektorami CSS w pliku caspian.css. Dokładniej z .menu-item.

EDIT: Wydaje trzeba zmienić .context-menu też dlatego, że pojawiło się menu z MenuButton jest 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

ten został również poproszony here i here, więc postanowiłem napisać szablonu CSS dla pasków menu stylizacji.

Korzystanie z tego szablonu CSS jest bardzo łatwy sposób projektować do MenuBar, jego najwyższego poziomu MenuButton wpisy, a każdy MenuButton „s MenuItem dzieci, tj,«cały pasek menu».

Jedyną rzeczą, którą należy zrobić, to ustawić cztery zmienne w zależności od swoich potrzeb:

• -fx-my-menu-color: domyślny kolor paska menu w tle (to znaczy, gdy pozycja nie jest unosił/wybrane)
• -fx-my-menu-color-highlighted: Kolor tła elementu, jeśli jest on zawieszony/wybrany.
• -fx-my-menu-font-color: domyślny kolor czcionki na pasku menu za (tj gdy pozycja nie jest unosił/wybrane)
• -fx-my-menu-font-color-highlighted: przesyłka za kolor czcionki, jeśli jest on unosił/wybrany.

Kompletny plik CSS jest skomentował wyjaśnić każdą zdefiniowaną regułę:

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