如何用CSS移除菜单按钮标签内边距并保留箭头隐藏效果

你可以通过直接选中菜单按钮内部的标签组件，设置其-fx-padding为0来实现需求，同时保留你已有的隐藏箭头的CSS规则。

完整CSS代码 #

如果你的菜单按钮使用了自定义样式类.menu-button_wo_arrow，用这段代码：

/* 隐藏下拉箭头 */
.menu-button_wo_arrow > .arrow-button, 
.menu-button > .arrow-button > .arrow {
    -fx-padding: 0;
}

/* 移除标签内边距，让标签填满菜单按钮 */
.menu-button_wo_arrow > .label {
    -fx-padding: 0;
}

如果不需要自定义样式类，想全局生效的话用这段：

/* 隐藏下拉箭头 */
.menu-button > .arrow-button, 
.menu-button > .arrow-button > .arrow {
    -fx-padding: 0;
}

/* 移除标签内边距 */
.menu-button > .label {
    -fx-padding: 0;
}

说明 #

JavaFX的MenuButton内部结构中，标签是作为.label子节点存在的，直接选中这个节点设置内边距为0，就能让标签完全填满菜单按钮的区域，同时不会破坏你之前隐藏箭头的效果。

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