I'm experiencing a quirky problem. I've customized the scroll-bar of my ScrollPane in JavaFX with CSS, but there's a strange behavior where the border disappears whenever the ScrollPane is in focus. However, if I interact with a button outside of the pane, the border reappears.
Below are some images to illustrate:
When Unfocused:
https://i.sstatic.net/FsGwW.png
When Focused:
https://i.sstatic.net/WmdL6.png
Here is the snippet of CSS code that I'm using:
.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;
}