title: Styling javafx checkbox
body: <p>I've tried to apply the following styles to my CheckBox </p>
  
  <pre><code>.check-box .box {
      -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-white;
  }
  
  .check-box:selected .mark {
      -fx-background-color: -fx-colour-white;
  }
  
  .check-box:selected .box {
      -fx-background-color: -fx-blue;
  }
  </code></pre>
  
  <p>The goal is to have a white checkbox with grey border and when the checkbox is checked to have a blue background and white tick. When I apply these styles I get the result I want. However an odd thing happens when doing the following steps:<br>
  1- click on checkbox to select<br>
  2- click on checkbox to deselect<br>
  The checkbox disappears and will only appear again if I click on somewhere else in the pane.</p>
  
  <p>You can see the images below of the checkbox when it is first rendered then when it is checked.</p>
  
  <p><a href="https://i.stack.imgur.com/uOQri.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uOQri.png" alt="Checkbox in normal state"></a><a href="https://i.stack.imgur.com/FSo5D.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FSo5D.png" alt="Selected Checkbox"></a><a href="https://i.stack.imgur.com/fTn1C.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fTn1C.png" alt="Deselected Checkbox"></a></p>