How to hide the down arrow button on a combobox in javafx?

Question

I have an editable ComboBox and I wish to "hide" the down arrow button so that it looks like a normal textbox.

Answer 1

Use css as,

.combo-box .arrow, .combo-box .arrow-button{
    -fx-background-color: transparent;
}

Sample code::

public class ComboboxSample extends Application {
    public static void main(String[] args) {
        launch(args);
    }

    final Button button = new Button("Send");
    final Label notification = new Label();
    final TextField subject = new TextField("");
    final TextArea text = new TextArea("");

    String address = " ";

    @Override
    public void start(Stage stage) {
        stage.setTitle("ComboBoxSample");
        Scene scene = new Scene(new Group(), 450, 250);
// Load the css as below to the scene
        scene.getStylesheets()
                .add(ComboboxSample.class.getResource("styles.css").toExternalForm());

        final ComboBox emailComboBox = new ComboBox();
        emailComboBox.setEditable(true);
        emailComboBox.getItems().addAll("[email protected]",
                "[email protected]", "[email protected]",
                "[email protected]", "[email protected]");

        final ComboBox priorityComboBox = new ComboBox();
        priorityComboBox.getItems().addAll("Highest", "High", "Normal", "Low",
                "Lowest");

        priorityComboBox.setValue("Normal");

        GridPane grid = new GridPane();
        grid.setVgap(4);
        grid.setHgap(10);
        grid.setPadding(new Insets(5, 5, 5, 5));
        grid.add(new Label("To: "), 0, 0);
        grid.add(emailComboBox, 1, 0);
        grid.add(new Label("Priority: "), 2, 0);
        grid.add(priorityComboBox, 3, 0);
        grid.add(new Label("Subject: "), 0, 1);
        grid.add(subject, 1, 1, 3, 1);
        grid.add(text, 0, 2, 4, 1);
        grid.add(button, 0, 3);
        grid.add(notification, 1, 3, 3, 1);

        Group root = (Group) scene.getRoot();
        root.getChildren().add(grid);
        stage.setScene(scene);
        stage.show();
    }
}

Output:

Answer 2

.combo-box1 .arrow-button
{
    -fx-background-color: null;
    -fx-background-insets: 0;
    -fx-background-radius: 0;
    -fx-padding: 0.0em 0em 0.0em 0.0em; /* 0 3 0 0 */
}

.combo-box1 .arrow-button .arrow
{
    -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
    -fx-background-insets: 0 0 0 0, 0;
    -fx-padding: 0em 0em 0em 0em; /* 3 3.75 3 3.75 */
/*
    -fx-shape: "M 0 0 h 7 l -3.5 4 z";
*/
    -fx-shape: null;
}