ListView styling a selected item text-fill - JavaFX 8 MAGIC or BUG?


Question

I read this question and get this code from answer:

.list-cell:filled:selected:focused, .list-cell:filled:selected {
    /* 3:, 4: */
    -fx-background-color: linear-gradient(#333 0%, #777 25%, #aaa 75%, #eee 100%);
    -fx-text-fill: white; /* 5 */
}
.list-cell { -fx-text-fill: black; /* 5 */ }
.list-cell:odd { -fx-background-color: white; /* 1 */ }
.list-cell:even { -fx-background-color: #8f8; /* for information */ }
.list-cell:filled:hover { 
    -fx-background-color: #00f; /* 2 */
    -fx-text-fill: white; /* 5 */
}

I would make the selected item with black text-fill (text-color). Therefore I take these classes
.list-cell:filled:selected:focused, .list-cell:filled:selected
and change attribute -fx-text-fill from white to black, but nothing happens, but if I change background color to red, then background color have changed (this does not apply to text color, this is just check on right classes)

How to change text color of selected item in focused ListView?

UPD1:
I tried to change text color of list-cell just in this variant:

.list-cell{
    -fx-text-fill: magenta;
}

and this variant:

.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled{
    -fx-text-fill: magenta;
}

but nothing works

1
3
5/23/2017 10:34:08 AM

Accepted Answer

I tried the following code and it works just fine on Java 8. It changes the text color of the selected cell.

ListViewSample.java

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.ListView;
import javafx.scene.layout.Priority;
import javafx.scene.layout.VBox;
import javafx.scene.text.Font;
import javafx.stage.Stage;

public class ListViewSample extends Application {

    ListView<String> list = new ListView<String>();
    ObservableList<String> data = FXCollections.observableArrayList(
            "chocolate", "salmon", "gold", "coral", "darkorchid",
            "darkgoldenrod", "lightsalmon", "black", "rosybrown", "blue",
            "blueviolet", "brown");
    final Label label = new Label();

    @Override
    public void start(Stage stage) {
        VBox box = new VBox();
        Scene scene = new Scene(box, 200, 200);
        scene.getStylesheets().add(this.getClass().getResource("list.css").toExternalForm());
        stage.setScene(scene);
        stage.setTitle("ListViewSample");
        box.getChildren().addAll(list, label);
        VBox.setVgrow(list, Priority.ALWAYS);

        label.setLayoutX(10);
        label.setLayoutY(115);
        label.setFont(Font.font("Verdana", 20));
        list.setItems(data);
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

list.css

.list-cell:filled:selected {
    -fx-text-fill: red;
}

This also works :

.list-cell:filled:selected:focused, .list-cell:filled:selected {
    -fx-background-color: linear-gradient(#328BDB 0%, #207BCF 25%, #1973C9 75%, #0A65BF 100%);
    -fx-text-fill: red;
}
3
9/14/2014 10:46:14 AM

Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
Icon