如何修改JavaFX中ChoiceBox的箭头图标？

你之前的代码没生效，主要是因为默认的arrow-button自带背景样式会覆盖你的设置，而且隐藏箭头的方式不够彻底，还有背景图的显示规则没配置全。试试下面的写法：

/* 彻底隐藏默认箭头，比opacity:0更可靠 */
.choice-box .arrow {
    -fx-shape: "";
    -fx-padding: 0;
}

/* 重置箭头按钮的默认样式，清除原有背景干扰 */
.choice-box .arrow-button {
    -fx-background-color: transparent;
    -fx-background-insets: 0;
    -fx-padding: 4px; /* 调整内边距，适配你的图标大小 */
}

/* 设置自定义箭头图标 */
.choice-box .arrow-button {
    -fx-background-image: url("../icons/arrow_down_white.png");
    -fx-background-size: 16px 16px; /* 根据实际图标尺寸调整，别过大 */
    -fx-background-repeat: no-repeat;
    -fx-background-position: center center; /* 让图标居中显示 */
}

注意事项： #

• 图标路径要对应实际位置：如果图标在resources/icons目录下，编译后可以用绝对路径/icons/arrow_down_white.png更稳妥
• 调整-fx-padding和-fx-background-size的值，避免图标被裁剪或者超出按钮范围
• 如果需要hover、选中状态的不同图标，可添加伪类样式：

  .choice-box:hover .arrow-button {
      -fx-background-image: url("../icons/arrow_down_hover.png");
  }
  

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