스타일 메뉴 단추 및 메뉴 항목 방법

메뉴 단추에서 스타일을 변경하려고했습니다. 메뉴 버튼 스타일은 변경할 수 있지만 메뉴 항목은 변경할 수 없습니다. 메뉴 항목 내에서 메뉴 항목을 시도해도 아무런 문제가 없습니다.스타일 메뉴 단추 및 메뉴 항목 방법

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

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

Output looks like this

지금 내가 어떻게 알아 남아있는 색상을 변경할 수 있습니다?

출처

2012-09-06 Vinod CG

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

출처

2012-09-06 16:09:37

이것은 또한 here 및 here을 요구하고있다, 그래서 나는 스타일의 메뉴 표시 줄의 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 : 그것은 가리킬 경우 항목의 폰트 색/선택.

/* 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 파일은 각각의 정의 된 규칙을 설명하는 주석

출처

2017-07-27 13:50:01

스타일 메뉴 단추 및 메뉴 항목 방법

답변

관련 문제