How to hide down arrow button in combo box in javafx?

Question

I have an editable ComboBox , and I want to “hide” the down arrow button so that it looks like a regular text box.

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(" [e-mail] ", " [e-mail] ", " [e-mail] ", " [e-mail] ", " [e-mail] "); 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

I used the following ccs code:

 .combo-box1 .arrow-button { -fx-opacity: 0.0; -fx-cursor: text; } 

and this is in java:

 combobox.getStyleClass().add("combo-box1"); 

Answer 3

 .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; }