How to style custom control inside a ListView in JavaFX

Question

I have created a custom control extending HBox:

FXML

<fx:root alignment="CENTER_LEFT" prefHeight="80" prefWidth="400.0" spacing="5" styleClass="email-view"
         stylesheets="stylesheet.css" type="javafx.scene.layout.HBox" xmlns="http://javafx.com/javafx/8.0.112"
         xmlns:fx="http://javafx.com/fxml/1">
    <Region fx:id="unreadIndicator" prefWidth="5.0"/>
    <Label fx:id="senderAvatar" prefHeight="40.0" prefWidth="40.0" styleClass="sender-image-small"/>
    <Region prefWidth="10"/>
    <VBox prefHeight="200.0" prefWidth="100.0" HBox.hgrow="ALWAYS">
        <Region prefHeight="10"/>
        <HBox>
            <Label fx:id="fromLabel" styleClass="from-label">Anindya Chatterjee</Label>
            <Region HBox.hgrow="ALWAYS"/>
            <Label fx:id="dateLabel" styleClass="date-label">31st Dec 1999</Label>
            <Region prefWidth="5"/>
        </HBox>
        <Region prefHeight="5"/>
        <HBox>
            <Label fx:id="subjectLabel" styleClass="subject-label">Test Mail Subject</Label>
            <Region HBox.hgrow="ALWAYS"/>
            <ImageView fx:id="attachmentLabel" styleClass="attachment-label">
                <Image requestedHeight="15" requestedWidth="15" url="@attach.svg"/>
            </ImageView>
            <Region prefWidth="5"/>
        </HBox>
        <Region prefHeight="5"/>
        <HBox>
            <Label fx:id="contentLabel" styleClass="content-label" maxWidth="400">
                Here is some text for test mail just to check how does
                it look on mock ups. The final value will change
            </Label>
            <Region HBox.hgrow="ALWAYS"/>
            <ImageView fx:id="favoriteLabel" styleClass="favorite-label">
                <Image requestedHeight="15" requestedWidth="15" url="@favorite.svg"/>
            </ImageView>
            <Region minWidth="5"/>
        </HBox>
    </VBox>
</fx:root>

Java File

public class EmailView extends HBox {

    public Region unreadIndicator;
    public Label senderAvatar;
    public Label fromLabel;
    public Label dateLabel;
    public Label subjectLabel;
    public ImageView attachmentLabel;
    public Label contentLabel;
    public ImageView favoriteLabel;

    public EmailView() {
        FXMLLoader fxmlLoader = new FXMLLoader();
        fxmlLoader.setLocation(getClass().getClassLoader().getResource("email-view.fxml"));
        fxmlLoader.setRoot(this);
        fxmlLoader.setController(this);
        try {
            fxmlLoader.load();
        } catch (IOException exception) {
            throw new RuntimeException(exception);
        }
    }
}

I am using the control as a list view item. I have made changes to the css property to change the select bar color and all as follows

.list-view, .list-view:focused, .list-view:selected {
    -fx-control-inner-background: transparent;
    -fx-control-inner-background-alt: -fx-control-inner-background;
    -fx-background-color: transparent;
    -fx-padding: 0;
    -fx-fit-to-width: true;
    -fx-effect: null;
    -fx-selection-bar: transparent;
    -fx-selection-bar-non-focused: transparent;
}

.list-view .list-cell:filled:selected:focused, .list-view .list-cell:filled:selected {
    -fx-background-color: transparent;
    -fx-effect: null;
}

.list-view .list-cell:filled:hover {
    -fx-background-color: transparent;
    -fx-effect: null;
}

.email-view {
    -fx-background-color: -color-quinary;
    -fx-effect: dropshadow(three-pass-box, -color-text-inverted, 4, 0, 0, 1);
}

Now I want to change the background color of the custom control when it is selected inside the list view. The effect I am try to achieve more or less like this

Any pointer how to achieve this effect using css preferably?

Answer 1

Theoretically this set of selectors do the trick:

// Color of the list-cell selected + unselected: transparent
.list-view .list-cell,
.list-view .list-cell:filled,
.list-view .list-cell:selected,
.list-view .list-cell:focused,
 .list-view .list-cell:hover {
    -fx-background-color: transparent;
    -fx-effect: null;
}

// Color of the custom control hover
.list-view .list-cell:hover .email-view {
    -fx-background-color: greenyellow;
}

// Color of the custom control selected
.list-view .list-cell:filled:selected:focused .email-view,
.list-view .list-cell:filled:selected .email-view {
    -fx-background-color: green;
}

// Color of the custom control unselected
.email-view { -fx-background-color: gray; }

The goal is to kep the list-cell transparent all the time, and based on the pseudo-state of the list-cell set the background color of email-view. Maybe I forgot about some state, but it could be a good starting point.