title: Remove border around JavaFX ScrollPane scroll bar when *not* focused
body: <p>I have a strange issue. I've styled the scroll-bar of my ScrollPane in JavaFX using CSS, but now every time the ScrollPane is <em>in focus</em>, the border disappears. However, if I click a button outside of the pane, it comes back. <br>
  Here are the images: <br>
  <strong>Unfocused</strong>
  <a href="https://i.stack.imgur.com/FsGwW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FsGwW.png" alt="Unfocused"></a>
  <strong>Focused</strong>
  <a href="https://i.stack.imgur.com/WmdL6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WmdL6.png" alt="Focused"></a>
  Here is the CSS:
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.scroll-bar:horizontal .track,
  .scroll-bar:vertical .track{
      -fx-background-color :transparent;
      -fx-border-color :transparent;
      -fx-background-radius : 2.0em;
  }
  
  .scroll-bar:horizontal .increment-button ,
  .scroll-bar:horizontal .decrement-button {
      -fx-background-color :transparent;
      -fx-background-radius : 0.0em;
      -fx-padding :0.0 0.0 10.0 0.0;
  
  }
  
  .scroll-bar:vertical .track-background,
  .scroll-bar:horizontal .track-background {
     -fx-background-color: transparent;
     -fx-background-insets: 0;
     -fx-background-radius: 2em;
  }
  
  .scroll-bar:vertical .increment-button ,
  .scroll-bar:vertical .decrement-button {
      -fx-background-color :transparent;
      -fx-background-radius : 0.0em;
      -fx-padding :0.0 10.0 0.0 0.0;
  
  }
  
  .scroll-bar .increment-arrow,
  .scroll-bar .decrement-arrow{
      -fx-shape : " ";
      -fx-padding :0.15em 0.0;
  }
  
  .scroll-bar:vertical .increment-arrow,
  .scroll-bar:vertical .decrement-arrow{
      -fx-shape : " ";
      -fx-padding :0.0 0.15em;
  }
  
  .scroll-bar:horizontal .thumb,
  .scroll-bar:vertical .thumb {
      -fx-background-color : #dddddd;
      -fx-background-insets : 2.0, 0.0, 0.0;
      -fx-background-radius : 2.0em;
  }
  
  .scroll-bar:horizontal .thumb:hover,
  .scroll-bar:vertical .thumb:hover {
      -fx-background-color : #9e9e9e;
      -fx-background-insets : 2.0, 0.0, 0.0;
      -fx-background-radius : 2.0em;
  }
  
  .scroll-bar{
     -fx-background-color: transparent;
     -fx-background-radius: 2em;
     -fx-focus-color: transparent;
     -fx-faint-focus-color: transparent;
  }
  
  .scroll-bar:vertical:focused {
     -fx-background-color: transparent;
  }</code></pre>
  </div>
  </div>
  </p>