This discussion is archived
6 Replies Latest reply: Nov 29, 2012 4:29 AM by fabsav RSS

How to style ComboBox

fabsav Newbie
Currently Being Moderated
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 Guru
    Currently Being Moderated
    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 Newbie
    Currently Being Moderated
    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 Guru
    Currently Being Moderated
    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 Newbie
    Currently Being Moderated
    nothing :(

    i tried a couple of different way but nothing...
  • 5. Re: How to style ComboBox
    James_D Guru
    Currently Being Moderated
    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 Newbie
    Currently Being Moderated
    :| 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 :)

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points