Changing the drop down indicator image on a JavaFX MenuButton? - styling

Question

In my application I am using a MenuButton to provide a drop down list of actions. The default drop down indicator on a MenuButton is a black triangle pointing down. I want to change that to a white triangle pointing down to match the color of my text.
Just in case I am not being clear, here is a screen shot that should clear it up.
I have tried placing a graphic in the fxml file like so:
<MenuButton contentDisplay="RIGHT" graphicTextGap="10.0" layoutX="92.0" layoutY="73.0" mnemonicParsing="false" styleClass="toolbar-button" text="MenuButton">
<graphic>
<ImageView fitHeight="4.0" fitWidth="7.0" mouseTransparent="true" preserveRatio="true">
<image>
<Image url="#Arrow_Down.png" preserveRatio="true" smooth="false" />
</image>
</ImageView>
</graphic>
<items>
<MenuItem mnemonicParsing="false" text="Action 1" />
<MenuItem mnemonicParsing="false" text="Action 2" />
</items>
</MenuButton>
but that gives me both a black and white triangle:
If I could somehow hide the black triangle that would work, but it sure seems like there should be a way to style the menu button for it to be white instead.
Here is Sample.fxml for those wanting to help:
<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import java.net.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.image.*?>
<?import javafx.scene.layout.*?>
<AnchorPane id="AnchorPane" prefHeight="200.0" prefWidth="320.0" xmlns:fx="http://javafx.com/fxml">
<children>
<MenuButton contentDisplay="RIGHT" graphicTextGap="10.0" layoutX="92.0" layoutY="73.0" mnemonicParsing="false" styleClass="toolbar-button" text="MenuButton">
<graphic>
<ImageView fitHeight="4.0" fitWidth="7.0" mouseTransparent="true" preserveRatio="true">
<image>
<Image url="#Arrow_Down.png" preserveRatio="true" smooth="false" />
</image>
</ImageView>
</graphic>
<items>
<MenuItem mnemonicParsing="false" text="Action 1" />
<MenuItem mnemonicParsing="false" text="Action 2" />
</items>
</MenuButton>
</children>
<stylesheets>
<URL value="#test.css" />
</stylesheets>
</AnchorPane>
The test.css:
root {
display: block;
}
.toolbar-button {
-fx-background-color: #006699;
-fx-padding: 2 4 4 4;
-fx-text-base-color: #FFFFFF;
-fx-font-weight: bold;
-fx-font-size: 12px;
}
.toolbar-button:hover {
-fx-background-color: #B2E1FF;
-fx-padding: 2 4 4 4;
-fx-text-base-color: #000000;
-fx-font-weight: bold;
-fx-font-size: 12px;
}
And the Test.java to run it:
package test;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;
public class Test extends Application {
public static void main(String[] args) {
Application.launch(Test.class, args);
}
#Override
public void start(Stage stage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("Sample.fxml"));
stage.setScene(new Scene(root));
stage.show();
}
}
So how do I make the black triangle a white triangle?

Answer 1

After some digging I found the answer. Turns out MenuButton does not use an image for the button but instead us -fx-shape css property to do this. In the caspian.css file it is applied in the .menu-button .arrow and .menu-button:openvertically .arrow sections. Since I was already applying the toolbar-button to my MenuButton, I simply added the following to the my css file:
.toolbar-button .arrow {
-fx-background-insets: 1 0 -1 0, 0;
-fx-background-color: -fx-mark-color, #FFFFFF;
-fx-padding: 0.25em; /* 3 */
-fx-shape: "M 0 -3.5 v 7 l 4 -3.5 z";
}
.toolbar-button:hover .arrow {
-fx-background-insets: 1 0 -1 0, 0;
-fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
-fx-padding: 0.25em; /* 3 */
-fx-shape: "M 0 -3.5 v 7 l 4 -3.5 z";
}
.toolbar-button:openvertically .arrow {
-fx-padding: 0.166667em 0.333333em 0.166667em 0.333333em; /* 2 4 2 4 */
-fx-shape: "M 0 0 h 7 l -3.5 4 z";
}
Which even allows me to change the color of the arrow back to black on hover.