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?

Solution

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.

Comments

[Xendar]

Will try! I was thinking that I could override the - fx-body-color as well, but I suppose it is used in a lot of UI controls...

[Xendar]

So basically overriding the borders in the definition to have them printed, but normally sure they would be displayed the same way as for text field?

[Xendar]

Works like a charm :) Thanks!