How can we set a particular color for selected item on ListView in java fx?


Question

How can we set a particular color for selected item on ListView in java fx? Thanks in advance!!!

1
2
9/9/2013 8:39:15 AM

Add appropriate rules to your css file to override the following rules (copied from caspian.css):

.list-cell {
    -fx-skin: "com.sun.javafx.scene.control.skin.ListCellSkin";
    -fx-background-color: -fx-control-inner-background;
    -fx-padding: 0.25em; /* 3 */
    -fx-text-fill: -fx-text-inner-color;
    -fx-opacity: 1;
}

.list-cell:odd {
    -fx-background-color: derive(-fx-control-inner-background,-5%);
}

.list-view:focused .list-cell:focused {
    -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-control-inner-background;
    -fx-background-insets: 0, 1, 2;
}

.list-view:focused .list-cell:focused:odd {
    -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, derive(-fx-control-inner-background,-5%);
    -fx-background-insets: 0, 1, 2;
}

/* When the list-cell is selected and focused */
.list-view:focused .list-cell:filled:focused:selected {
    -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar;
    -fx-background-insets: 0, 1, 2;
    -fx-background: -fx-accent;
    -fx-text-fill: -fx-selection-bar-text;
}

.list-view:focused .list-cell:filled:selected, .list-view:focused .list-cell:filled:selected:hover {
    -fx-background: -fx-accent;
    -fx-background-color: -fx-selection-bar;
    -fx-text-fill: -fx-selection-bar-text;
}

.list-view:focused .list-cell:filled:focused:selected:hover {
    -fx-background: -fx-accent;
    -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar;
    -fx-background-insets: 0, 1, 2;
    -fx-text-fill: -fx-selection-bar-text;
}

/* When the ListView is _not_ focused, we show alternate selection colors */
.list-cell:filled:selected:focused, .list-cell:filled:selected, .list-view:horizontal .list-cell:filled:selected {
    -fx-background-color: lightgray;
    -fx-text-fill: -fx-selection-bar-text;
}

.list-cell:filled:selected:focused:disabled, .list-cell:filled:selected:disabled {
    -fx-opacity: -fx-disabled-opacity;
}

.list-cell:filled:hover {
    -fx-background-color: -fx-cell-hover-color;
    -fx-text-fill: -fx-text-inner-color;
}

.list-view:focused .list-cell:filled:focused:hover {
    -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-cell-hover-color;
    -fx-background-insets: 0, 1, 2;
    -fx-text-fill: -fx-text-inner-color;
}

.list-view:horizontal .list-cell:filled:selected, .list-view:horizontal .list-cell:filled:selected:hover {
    -fx-background-color: linear-gradient(to right, derive(-fx-accent,-7%), derive(-fx-accent,-25%));
}

Especially, look for :selected pseudo classes and modify them as you need.

4
9/9/2013 10:36:14 AM

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