メニューボタンでスタイルを変更しようとしました。メニューボタンのスタイルは変更できますが、メニューアイテムは変更できません。 メニューボタン内のメニュー項目を試しても、変更されません。スタイルメニューボタンとメニュー項目の方法
.menu-button {
-fx-background-color:black;
}
.menu-button .label {
-fx-background-color:black; }
今どのように私は取り残されている色を変更できますか？
MenuButtonは内部でMenuを使用し、同様のAPIを備えています。このようにしてMenuButtonにはMenuItemのリストがMenuのように表示されます。ですから、.menuと.menu-buttonと.menu-itemのcaspian.cssの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 */
}
これも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：それが推移した場合、アイテムのフォントの色を選択/。 /* 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;
}
完全なCSSファイルには、各定義されたルールを説明するためにコメントしています