6 Replies Latest reply: Nov 29, 2012 6:29 AM by fabsav RSS

    How to style ComboBox

    fabsav
      Hi!
      do someone knows a way to style a combobox via CSS ?

      From caspian.css I found something but i can style only the "external shape" of the combobox, not the menù shown.

      Can i style it by css, or the only way is to use a cell factory?

      thank you!
        • 1. Re: How to style ComboBox
          James_D
          You can do it with CSS. The structure of the ComboBox is documented here http://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html#combobox

          So, for example, you can do
          .combo-box-popup .list-cell {
            /* styles for the cells in the popup */
          }
          See also this thread: Coloring text of combobox with listview via css
          • 2. Re: How to style ComboBox
            fabsav
            i knew the structure, but it doesn't seems to work...

            Substructure
            list-cell - a ListCell instance used to show the selection in the button area of a non-editable ComboBox
            text-input — a TextField instance used to show the selection and allow input in the button area of an editable ComboBox
            combo-box-popup - a PopupControl that is displayed when the button is pressed
            -- list-view - a ListView
            ----list-cell - a ListCell

            this means that if i write

            .combo-box .combo-box-popup .list-view .list-cell {
                 -fx-background-color: red;
            }

            i should see a red backgrounded cell, right?
            reality i different from my imagination :P
            • 3. Re: How to style ComboBox
              James_D
              I think the problem is that popups are not descended from the component from which they popup.

              Try it without the .combo-box at the beginning.
              • 4. Re: How to style ComboBox
                fabsav
                nothing :(

                i tried a couple of different way but nothing...
                • 5. Re: How to style ComboBox
                  James_D
                  This works for me:

                  ComboBoxTest.java
                  import javafx.application.Application;
                  import javafx.scene.Scene;
                  import javafx.scene.control.ComboBox;
                  import javafx.scene.layout.BorderPane;
                  import javafx.stage.Stage;
                  
                  public class ComboBoxTest extends Application {
                  
                    @Override
                    public void start(Stage primaryStage) throws Exception {
                      BorderPane root = new BorderPane();
                      ComboBox<String> combo = new ComboBox<String>();
                      combo.getItems().addAll("Apples", "Oranges", "Pears", "Bananas");
                      root.setTop(combo);
                      Scene scene = new Scene(root, 400, 400);
                      scene.getStylesheets().add("combo.css");
                      primaryStage.setScene(scene);
                      primaryStage.show();
                    }
                  
                    public static void main(String[] args) { launch(args); }
                  }
                  and
                  combo.css
                  @CHARSET "UTF-8";
                  .combo-box-popup .list-view .list-cell
                  {
                    -fx-background-color: red;
                  }
                  • 6. Re: How to style ComboBox
                    fabsav
                    :| today it works without change the code :|

                    it was as you wrote, and as i wrote yesterday and as is still written from yesterday!

                    however... thank you :)