title: How to style custom control inside a ListView in JavaFX
body: <p>I have created a custom control extending <code>HBox:</code></p>
  
  <p><strong>FXML</strong></p>
  
  <pre><code>&lt;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"&gt;
      &lt;Region fx:id="unreadIndicator" prefWidth="5.0"/&gt;
      &lt;Label fx:id="senderAvatar" prefHeight="40.0" prefWidth="40.0" styleClass="sender-image-small"/&gt;
      &lt;Region prefWidth="10"/&gt;
      &lt;VBox prefHeight="200.0" prefWidth="100.0" HBox.hgrow="ALWAYS"&gt;
          &lt;Region prefHeight="10"/&gt;
          &lt;HBox&gt;
              &lt;Label fx:id="fromLabel" styleClass="from-label"&gt;Anindya Chatterjee&lt;/Label&gt;
              &lt;Region HBox.hgrow="ALWAYS"/&gt;
              &lt;Label fx:id="dateLabel" styleClass="date-label"&gt;31st Dec 1999&lt;/Label&gt;
              &lt;Region prefWidth="5"/&gt;
          &lt;/HBox&gt;
          &lt;Region prefHeight="5"/&gt;
          &lt;HBox&gt;
              &lt;Label fx:id="subjectLabel" styleClass="subject-label"&gt;Test Mail Subject&lt;/Label&gt;
              &lt;Region HBox.hgrow="ALWAYS"/&gt;
              &lt;ImageView fx:id="attachmentLabel" styleClass="attachment-label"&gt;
                  &lt;Image requestedHeight="15" requestedWidth="15" url="@attach.svg"/&gt;
              &lt;/ImageView&gt;
              &lt;Region prefWidth="5"/&gt;
          &lt;/HBox&gt;
          &lt;Region prefHeight="5"/&gt;
          &lt;HBox&gt;
              &lt;Label fx:id="contentLabel" styleClass="content-label" maxWidth="400"&gt;
                  Here is some text for test mail just to check how does
                  it look on mock ups. The final value will change
              &lt;/Label&gt;
              &lt;Region HBox.hgrow="ALWAYS"/&gt;
              &lt;ImageView fx:id="favoriteLabel" styleClass="favorite-label"&gt;
                  &lt;Image requestedHeight="15" requestedWidth="15" url="@favorite.svg"/&gt;
              &lt;/ImageView&gt;
              &lt;Region minWidth="5"/&gt;
          &lt;/HBox&gt;
      &lt;/VBox&gt;
  &lt;/fx:root&gt;
  </code></pre>
  
  <p><strong>Java File</strong></p>
  
  <pre><code>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);
          }
      }
  }
  </code></pre>
  
  <p>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</p>
  
  <pre><code>.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);
  }
  </code></pre>
  
  <p>Now I want to change the background color of the custom control when it is <strong>selected</strong> inside the list view. The effect I am try to achieve more or less like this</p>
  
  <p><a href="https://i.stack.imgur.com/vm3fo.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vm3fo.jpg" alt="enter image description here"></a></p>
  
  <p>Any pointer how to achieve this effect using css preferably?</p>