每个选定项目的JavaFX ComboBox背景颜色

Question

I would like to change background of a ComboBox based on selected item.

For example: if selected first item then background should be green, if second one is selected then red.

Is this possible?

Answer 1

Sure this is possible. Create custom ListCell s in a cellFactory you use with the ComboBox and use it to modify the Cell 's style based on the item it contains.

Example:

public class Item {

    public Item(String value, Color color) {
        this.value = value;
        this.color = color;
    }

    private final String value;
    private final Color color;

    public String getValue() {
        return value;
    }

    public Color getColor() {
        return color;
    }
}

ComboBox<Item> comboBox = new ComboBox<>(FXCollections.observableArrayList(
        new Item("Summer", Color.RED),
        new Item("Winter", Color.CYAN),
        new Item("Spring", Color.LIME),
        new Item("Autumn", Color.BROWN)
));

comboBox.setCellFactory(lv -> new ListCell<Item>(){

    @Override
    protected void updateItem(Item item, boolean empty) {
        super.updateItem(item, empty);

        if (empty || item == null) {
            setBackground(Background.EMPTY);
            setText("");
        } else {
            setBackground(new Background(new BackgroundFill(item.getColor(),
                                                            CornerRadii.EMPTY,
                                                            Insets.EMPTY)));
            setText(item.getValue());
        }
    }

});

comboBox.setButtonCell(comboBox.getCellFactory().call(null));

Answer 2

If you want to just set the color of the ComboBox itself and not the items of the ComboBox inside the drop-down list, you can create a custom binding between the buttonCellProperty and the valueProperty of the ComboBox to implement the custom coloring.

Example

This example colors the ComboBox to green if the first item is selected, to red if the second item is selected, and leaves the coloring as it is otherwise.

Update: The background color of the arrow button of the ComboBox is also colored now, for that the lookup method can be used to get the arrow button: StackPane arrowButton = (StackPane) combo.lookup(".arrow-button"); .

ComboBox<String> combo = new ComboBox<>();
combo.setItems(FXCollections.observableArrayList("First", "Second", "Third", "Fourth"));

combo.buttonCellProperty().bind(Bindings.createObjectBinding(() -> {

    int indexOf = combo.getItems().indexOf(combo.getValue());

    Color color = Color.TRANSPARENT;

    switch (indexOf) {
    case 0: color = Color.GREEN; break;
    case 1: color = Color.RED; break;
    default: break;
    }

    final Color finalColor = color;

    // Get the arrow button of the combo-box
    StackPane arrowButton = (StackPane) combo.lookup(".arrow-button");


    return new ListCell<String>() {

        @Override
        protected void updateItem(String item, boolean empty) {
            super.updateItem(item, empty);

            if (empty || item == null) {
                setBackground(Background.EMPTY);
                setText("");
            } else {
                setBackground(new Background(new BackgroundFill(finalColor, CornerRadii.EMPTY, Insets.EMPTY)));
                setText(item);
            }

            // Set the background of the arrow also
            if (arrowButton != null)
                arrowButton.setBackground(getBackground());
        }

    };
}, combo.valueProperty()));

The result is like:

Notes

1) If you want to color the items also in the drop-down list, you can pick the solution from other answers here.

2) If you do not display String s but items that are able to store also the color of the item, the solution is even shorter, just use the color of the selected item in updateItem method rather than calculating your own color.

Answer 3

 public class Main extends Application {

Random r = new Random();
private class Item {
    Color c;
    String s;
    public Item(Color a,String b){
        c = a;
        s = b;
    }

    @Override
    public String toString() {
        // TODO Auto-generated method stub
        return s;
    }
}

private void addAll(List<String> items){
    for(String s : items){
        box.getItems().add(new Item(Color.WHITE,s));
    }
}

ComboBox<Item> box;

@Override
public void start(Stage primaryStage) {

    Pane p;

    try {
        p = new StackPane();
        box = new ComboBox<Item>();
        box.setMinWidth(100);
        addAll(Font.getFontNames());
        box.setCellFactory(new Callback<ListView<Item>, ListCell<Item>>() {

            @Override
            public ListCell<Item> call(ListView<Item> param) {
                // TODO Auto-generated method stub
                return new ListCell<Item>(){


                    @Override
                    public void updateSelected(boolean selected) {
                        super.updateSelected(selected);
                        if(selected){
                            getItem().c = Color.rgb(r.nextInt(205),
                                    r.nextInt(205), r.nextInt(205), 1);

                        }
                        setStyle("-fx-text-fill: black; -fx-background-color: #" +
                                getItem().c.toString().substring(2)+";");
                    }

                    @Override
                    protected void updateItem(Item item, boolean empty) {
                        // TODO Auto-generated method stub
                        super.updateItem(item, empty);
                        if(empty){
                            return;
                        }
                        setText(item.toString());
                        setStyle("-fx-text-fill: black; -fx-background-color: #" +
                                getItem().c.toString().substring(2)+";");
                    }

                };
            }
        });
        p.getChildren().add(box);
        p.setPrefSize(500, 500);
        Scene scene = new Scene(p);
        scene.getStylesheets().add(getClass().
                getResource("application.css").toExternalForm());
        primaryStage.setScene(scene);
        primaryStage.show();

    } catch(Exception e) {
        e.printStackTrace();
    }
}

Answer 4

    combobox.valueProperty().addListener(new ChangeListener<String>() {
        @Override
        public void changed(ObservableValue ov, String t, String t1) {
            if (t1.equals("Option 1")) {
               combobox.setStyle(" -fx-background-color: #000000");
            }
            if (t1.equals("Option 2")) {
                combobox.setStyle(" -fx-background-color: #FFFFFF");
            }
        }
    });

you should be able to do something quite simple like the above with a basic change listener, you may have to refresh the page (I often just remove and re-add the component so you can see the change take place)

This is on the basis you want to select a combobox item then the box to change, not each item to have a different colour from the start