CODEWITHSUNDEEP
javacssjavafxcomboboxscenebuilder
8m4c
8m4c

Reputation: 51

JavaFX/CSS: Changing text color of ComboBox's selected item

I'm using a custom JavaFX library called JFoenix that overhauls some JavaFX components with Google's Material Design. The problem I'm specifically running into is changing the text color of a ComboBox of Strings' selected item after it has been selected. This is my before screen, with the item in question circled.

The text turns from gray to black when I select an item from the ComboBox (see screenshot here). I want the text from the selected item to be the same color as the rest of the labels. Adding a -fx-text-fill or -fx-text-inner-color in Scene Builder doesn't work.

The only possible solution I've found is making the ComboBox editable and setting the color through its Editor after the user selects an option:

@FXML
private void handleComboBoxFormat() {
     this.mpaaBox.getEditor().setStyle("-fx-text-fill: #eceff1;" + "-fx-background-color: #445566");
}

I don't like this solution because I don't want the ComboBox to be editable, and it just feels messy. Is there any other way to edit the text color? Thanks!

Upvotes: 2

Views: 10053

Answers (3)

Steve T
Steve T

Reputation: 383

Much thanks, this helped me alot. I played with it some more, and I was able to achieve this styling.

enter image description here

Using these entries:

/* outer combo-box text */
.combo-box .list-cell {
  -fx-text-fill: white;
}

/* combo-box list view text, not hovered or focused */
.combo-box .list-view .list-cell {
  -fx-text-fill: black;
}

/* combo-box selected text */
.combo-box .list-view .list-cell:focused {
  -fx-background-color : #5F9EA0;  /* Cadet Blue */
  -fx-text-fill: white;
}

/* combo-box hover text */
.combo-box .list-view .list-cell:hover {
  -fx-background-color : #5F9EA0;  /* Cadet Blue */
  -fx-text-fill: white;
}

Upvotes: 2

8m4c
8m4c

Reputation: 51

OK, so after messing with the CSS that @MouseEvent suggested, I figured out the solution.

.combo-box .list-view .list-cell affects the items in the ComboBox's list when you open the pop-up.

.combo-box .list-cell affects the label of the selected item, which was what I was having trouble accessing.

Upvotes: 3

Mordechai
Mordechai

Reputation: 16214

-fx-text-fill isn't defined in combo box.

But reading the CSS Reference Guide I see the structure:

.combo-box > .list-view > .list-cell

where .list-cell defines -fx-text-fill inherited from Labeled.

Upvotes: 3

Related Questions