web-dev-qa-db-ja.com

メニューボタンとメニュー項目のスタイルを設定する方法

メニューボタンのスタイルを変えてみました。メニューボタンのスタイルは変更できましたが、メニュー項目は変更できませんでした。 menu-button内のメニュー項目を変更しても、変更されません。

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

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

Output looks like this

除外された色を変更するにはどうすればよいですか？

cssjavafxjavafx-2javafx-8menuitem
17
Vinod CG

MenuButtonはMenuを内部で使用し、同様のAPIを持っています。 MenuButtonには、MenuItemと同じようにMenusリストが含まれています。だから、あなたはcaspian.cssの.menu、.menu-buttonおよび.menu-item CSSセレクターを試してみる必要があると思います。より具体的には.menu-itemを使用します。

編集： menuButtonのポップアップメニューはContextMenuであるため、.context-menuも変更する必要があるようです。

.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 */
}
23
Uluk Biy

これも here および here と尋ねられたため、メニューバーのスタイルを設定するためのCSSテンプレートを作成することにしました。

このCSSテンプレートを使用すると、MenuBar、その最上位のMenuButtonエントリ、および各MenuButtonのMenuItemの子、つまり「メニューバー全体」。

必要なのは、必要に応じて4つの変数を調整することだけです。

  • -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'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; 
}
8
Markus Weninger