Xendar Xendar - 1 year ago 763
Java Question

JavaFX ComboBox CSS style

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:

enter image description here

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!

enter image description here

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 Source

ComboBox inherits its CSS style from ComboBoxBase. The default style of ComboBoxBase is:

.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;
}

so you can override it 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.

Note: In case of ComboBox the overriding of .combo-box-base and .combo-box are equivalent. But for example ColorPicker also inherits ComboBoxBase, so if you override .combo-box-base, all of the ColorPicker controls will use this style also.