title: Toggle button .isSelected() is true, but visually not changing in JavaFX
body: <p>I'm trying to make an indicator light using a toggle button. It will "illuminate" when it's "Selected" value is true. And not "illuminate" when it's "Selected" value is false. I have added the regular button only to test the formatting of the visuals on the toggle button. In the actual program the "lights" will be controlled within other methods. </p>
  
  <p>Problem is when I set the, toggleBtn.setSelected(true); it does not update the visuals. If I call toggleBtn.isSelected(); it returns true, so I know it is updating, just not the visual. If I "pre-select" the toggle button by clicking on it in the program before clicking the "Test" button, it will cycle to the off visuals. But it will not cycle back to the On visuals. </p>
  
  <p>I have searched all over and I think it appears I need to add a listener however I'm not sure how that would help to update the visuals?</p>
  
  <p>Following is the pertinent parts of the code. If you need more please let me know. </p>
  
  <p>Controller</p>
  
  <pre><code>@FXML
  private void LightsTest(ActionEvent event) throws InterruptedException {
      System.out.println("Light illuminated");
      toggleBtn.setSelected(true);
      System.out.println("Light is Selected: " + toggleBtn.isSelected());
  
      Thread.sleep(1000);
  
      System.out.println("Light not illuminated");
      toggleBtn.setSelected(false);
      System.out.println("Light is Selected: " + toggleBtn.isSelected());
  }
  </code></pre>
  
  <p>FXML</p>
  
  <pre><code>&lt;AnchorPane id="mainPane" prefHeight="600.0" prefWidth="1024.0" stylesheets="@CSSFile.css" xmlns="http://javafx.com/javafx" xmlns:fx="http://javafx.com/fxml"&gt;
  &lt;children&gt;
      &lt;ToggleButton id="Light" fx:id="toggleBtn" mnemonicParsing="false" styleClass="warningLights" text="LIGHT ON" /&gt;
      &lt;Button id="testBtn" fx:id="lightsBtn" layoutX="427.0" layoutY="30.0" mnemonicParsing="false" onAction="#LightsTest" prefHeight="49.0" prefWidth="106.0" text="TEST LIGHTS" /&gt;
  &lt;/children&gt;
  &lt;/AnchorPane&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.warningLights {
      -fx-background-color: linear-gradient(#132233 5%, #465566 50%, #132233 95%);
      -fx-background-radius: 15px;
      -fx-border-width: 5px;
      -fx-border-radius: 15px 15px 15px 15px;
      -fx-font-size: 18px;
      -fx-font-weight: bold;
  }
  
  .warningLights:selected {
      -fx-background-color: linear-gradient(#EE0000 5%, #FDA8A8 50%, #EE0000 95%);
      -fx-effect: dropshadow(three-pass-box, black, 10, 0.0, 1, 5);
  }
  </code></pre>
  
  <p>Thanks everyone!</p>