[FIXED] Unable to custom text fill in JavaFX combo-box

Issue

I'm currently working on a professional software using JavaFX 2 (JDK 1.8). As i'm placing a ComboBox< Label > instance in my toolbar, I can't find a way to define text color, in combo-box-base as weel as in list-view.

Here is the FXML file CommonToolBar :

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.ToolBar?>
<?import javafx.scene.control.ComboBox?>
<?import javafx.scene.layout.HBox?>

<HBox styleClass="h-box" xmlns:fx="http://javafx.com/fxml/1" fx:controller="stackoverflow.controller.CommonToolBarController">
    <ToolBar prefHeight="+Infinity" HBox.hgrow="ALWAYS">
        <items>
            <ComboBox fx:id="portSelection" prefHeight="30.0" prefWidth="100.0"/>
        </items>
    </ToolBar>
</Hbox>

The CommonToolBarController class :

package stackoverflow.controller;

import javafx.fxml.FXML;
import javafx.scene.control.ComboBox;
import javafx.scene.layout.HBox;

public class CommonToolBarController extends HBox {
    @FXML
    private ComboBox<Label> portSelection;

    @FXML
    public void initialize() {
        portSelection.getItems().addAll(new Label("COM1"), 
                                        new Label("COM2"), 
                                        new Label("COM3"), 
                                        new Label("COM4"));
    }
}

The .combo-box part of my CSS stylesheet :

.combo-box-base {
    -fx-border-radius: 5.0;
    -fx-background-radius: 5.0;
}

.combo-box-base:showing {
    -fx-border-radius: 5.0 5.0 0.0 0.0;
    -fx-background-radius: 5.0 5.0 0.0 0.0;
}

.combo-box .list-cell {
    -fx-background-insets: 2.0;
    -fx-background-radius: 3.0;
    -fx-background-color: transparent;
    -fx-text-fill: red;
}

.combo-box .list-cell:hover {
    -fx-background-color: #0096C9;
}

.combo-box .list-view {
    -fx-padding: 5.0 0.0;
    -fx-border-radius: 0.0 0.0 5.0 5.0;
    -fx-background-radius: 0.0 0.0 5.0 5.0;
}

And the final result : everything is good until I select a list item, then each selected item turns white into the base and transparent into the list view.

• Step 1
• Step 2
• Step 3
• Step 4
• Step 5
• Step 6

I tried inserting -fx-text-fill property in .combo-box selector and in the previous ones but it never works. Could somebody explain me, please? Thank you in advance :)

Solution

I found the solution by looking into Oracle's documentation about JavaFX ComboBox component (this way), which explains why my selected items disappear from the list without being erased:

A warning about inserting Nodes into the ComboBox items list

ComboBox allows for the items list to contain elements of any type, including Node instances. Putting nodes into the items list is strongly not recommended. This is because the default cell factory simply inserts Node items directly into the cell, including in the ComboBox 'button' area too. Because the scenegraph only allows for Nodes to be in one place at a time, this means that when an item is selected it becomes removed from the ComboBox list, and becomes visible in the button area. When selection changes the previously selected item returns to the list and the new selection is removed.

I follow Zephyr's suggestion, working with Strings is more relevant than with Labels. The solution is:

• Replacing ComboBox items into CommonToolBarController: portSelection.getItems().addAll("COM1", "COM2", "COM3", "COM4");

• Adding those three selectors to CSS stylesheet:

  .combo-box .list-cell:hover {
      -fx-background-color: #0096C9;
  }
  
  .combo-box .list-cell:focused {
      -fx-text-fill: black;
      -fx-font-weight: bold;
  }
  
  .combo-box .list-view .list-cell:focused {
      -fx-background-color: #0096C940;
  }

Answered By - 0009laH