我可以在JavaFX中更改ChoiceBox的箭头图标吗？

Question

我想要更改ChoiceBox的箭头图标，因为默认图标不适合我的应用程序。我没有找到任何关于使用CSS更改图标的文档。

我尝试了像这样编写CSS属性，但没有成功：

.choice-box .arrow {
    -fx-opacity: 0;
}

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

- zer

---

在您的JavaFX分发中的控件jar包中，您会找到一个名为modena.css的文件。它包含了所有控件的默认CSS，包括选择框和其箭头。研究该代码，然后创建自己的实现来自定义外观。如果我没记错的话，箭头是SVG路径，因此您可以提供自己的自定义SVG路径。其他定制也是可能的（例如自定义皮肤），但我建议首先尝试自定义CSS。 - jewelsea

Answer 1

我通过使用-fx-shape属性和类似这样的svg路径解决了我的问题。

.choice-box .open-button  .arrow {
    -fx-shape: "m1 135.469c.76-.548 1.57-.242 1.996-1.37 8.436-22.314 31.196-27.84 50.124-19.916 3.594 1.504 6.861 4.22 9.79 7.152 63.435 63.528 126.957 126.97 190.324 190.566 3.176 3.187 4.59 2.926 7.589-.082 63.153-63.34 126.583-126.403 189.57-189.906 18.037-18.184 52.119-13.714 60.844 12.708.132.402.74.647 1.444.672.319 7.395.319 15.082.319 23.238-1.567-.309-1.669.7-2.042 1.89-1.381 4.404-3.943 8.085-7.206 11.346-73.869 73.845-147.798 147.63-221.505 221.636-12.623 12.674-37.881 12.698-50.676-.163-69.553-69.915-139.393-139.543-209.104-209.3-7.658-7.664-16.25-14.586-21.079-24.937C1 151.313 1 143.625 1 135.47z";
    -fx-background-color: white;
    -fx-pref-width: 8;
    -fx-pref-height: 4;
}

特别感谢 @jewelsea 提供给我默认的 JavaFX CSS 样式文件。

- zer