JavaFX CSS设置Menu系列组件样式后出现异常亮色条如何解决

你遇到的亮色条是JavaFX的ContextMenu默认配置导致的：你当前给.context-menu设置的背景色是#8a8a8a浅灰色，而MenuItem的背景色是更深的#5c5c5c，ContextMenu默认自带的内边距、背景偏移量会让自身的浅灰色背景从MenuItem的间隙中露出来，就形成了你看到的亮色条。

直接修改你的CSS中.context-menu相关配置即可解决，调整后的完整参考代码如下：

.menu-item .label {
    -fx-font-size:14.0px;
    -fx-text-fill: white;
}

.menu-item:focused {
     -fx-background-color: darkgray;
}

/* 替换原有.context-menu配置 */
.context-menu {
    -fx-background-color: #5c5c5c; /* 和MenuItem背景色保持一致 */
    -fx-padding: 1px 0 1px 0; /* 可按需调整上下内边距，左右设为0避免侧边露色 */
    -fx-background-insets: 0;
    -fx-border-width: 0;
}

/* 如果你的菜单里加了SeparatorMenuItem分隔线，保留这段配置，没有可以删除 */
.separator-menu-item .line {
    -fx-background-color: #5c5c5c;
    -fx-pref-height: 1px;
}

#override:focused .label {
    -fx-text-fill: #ff8800;
}

#override .label {
    -fx-text-fill: #ff8800;
}

.menu-bar {
    -fx-background-color: #5c5c5c;
}

.button {
     -fx-background-color: #CCCCCC;
}

.menu .label {
    -fx-text-fill: white;
}

.menu-item {
     -fx-background-color: #5c5c5c;
    
}

.menu {
 -fx-background-color: #5c5c5c;
}

.menu:hover {
 -fx-background-color: darkgray;
}

修改后ContextMenu的背景和MenuItem完全一致，就不会出现亮色条的色差问题，原有菜单的其他交互样式（比如hover、focus效果）都不会受影响。

内容的提问来源于stack exchange，提问作者Dahlin