JavaFX ComboBox CSS style

Question

I am building a small application with JavaFX + FXML and I'm trying to implement some simple CSS to have a specific style.

I have an issue with the Combobox element. Indeed by default its color is grey:

And I would like to have it white (or transparent), and keep the borders, to match the same style as the Text Field. So I tried to set the background color to transparent but there is a side effect: The borders become transparent too!

Here is the CSS i have added:

.root {
    -fx-font-size: 11pt;
    -fx-font-family: "Verdana";
    -fx-background: #FFFFFF;
}

.normal-label {
    -fx-text-fill: #005EB8;
}

.normal-text-field {
    -fx-text-fill: #333333;
}

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

I am not at all used to CSS writing, so maybe I completely miss something out. Is it that the combobox does not define borders? So I have to override the borders and find out what are the borders of the Text Field?

Answer 1

ComboBox inherits its CSS style from ComboBoxBase.

The ComboBox control has all the properties and pseudo‑classes of ComboBoxBase.

The default CSS style class of ComboBoxBase is defined as:

.combo-box-base {
    -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
    -fx-background-insets: 0 0 -1 0, 0, 1, 2;
    -fx-background-radius: 3px, 3px, 2px, 1px;
    -fx-padding: 0.333333em 0.666667em 0.333333em 0.666667em; /* 4 8 4 8 */
    -fx-text-fill: -fx-text-base-color;
    -fx-alignment: CENTER;
    -fx-content-display: LEFT;
}

You can overwrite this style class like:

.combo-box-base {
    -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, white;
    -fx-background-insets: 0 0 -1 0, 0, 1, 2;
    -fx-background-radius: 3px, 3px, 2px, 1px;
}

This style-class just sets the inner part to white, the border is actually untouched (remove the last two properties and then you will get a plain white borderless ComboBox).

---

Note:

Overwriting .combo-box-base or .combo-box style-classes are equivalent if only ComboBoxes are used.

The reason in the answer to use .combo-box-base style-class rather than the other one is that there are other controls inheriting also the .combo-box-base style-class, such as ColorPicker and DatePicker. Overwriting .combo-box-base yields in having all these controls sharing the same style, resulting in a much unified design.