Как стилизовать кнопку меню и пункты меню

Я попытался изменить стили в кнопке меню. Я мог бы изменить стиль кнопки меню, но не пункт меню. Независимо от того, что я пробую элемент меню внутри кнопки меню, остается неизменным.

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

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

Output looks like this

Теперь, как я могу изменить цвет, который не учитывается?

Ответы

Ответ 1

MenuButton использует Menu внутренне и имеет аналогичный API. Таким образом, MenuButton содержит MenuItem список, как Menu. Поэтому я думаю, вам нужно попробовать играть с .menu, .menu-button и .menu-item селекторами CSS в caspian.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 */
}

Ответ 2

Здесь также задали здесь и здесь, поэтому я решил написать шаблон 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 label (not selected / hovered) ***/
.menu-bar > .container > .menu-button > .label {
    -fx-text-fill: -fx-my-menu-font-color;
}

/*** Top-level menu 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 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 label (not hovered / focused) ***/   
.menu-item .label {
    -fx-text-fill: -fx-my-menu-font-color;
}

/*** The item 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 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 menu items ***/  
.context-menu {
    -fx-background-color: -fx-my-menu-color; 
}