5

I am trying to remove the blue glowing border, which apears when the pane is focused of a tab in a tabpane in my javaFX application. any idea on how to do this in css?

blue border when focused

This is my current css:

 .tab{
    -fx-background-radius: 0;
    -fx-background-color:  derive(-fx-base, 0%);
    -fx-background-insets: 0.3; 
    -fx-focus-color: XXXXXX;
    }
.tab:hover{
    -fx-background-color:  derive(-fx-base, 20%);
}
.tab:selected{
    -fx-background-color:  derive(-fx-base, 60%);
}

but i dont know which value i should give focuse color to match the background derive(-fx-base, 60%) i can see a difference and if i set it to -fx-background-color i get an error

Exagon
  • 4,798
  • 6
  • 25
  • 53
  • outline: none; should be the CSS rule for that, but I don't work with javaFX so I'm not sure if that's what you're looking for. sorry if it's not. – dnmh Dec 10 '15 at 20:43
  • 1
    Related, but not identical, question: [How do I remove the default border glow of a JavaFX button (when selected)?](http://stackoverflow.com/questions/6092500/how-do-i-remove-the-default-border-glow-of-a-javafx-button-when-selected) – jewelsea Dec 11 '15 at 00:03
  • -fx-focus-color: transparent doesnt work for me i can see a little difference between the tab and the bordercolor – Exagon Dec 11 '15 at 10:31

2 Answers2

16

One way to achieve this is to set the border color to transparent.

.tab-pane:focused > .tab-header-area > .headers-region > .tab:selected .focus-indicator {
    -fx-border-color: transparent;
}

You can also set the focus color and the faint focus color (used for the inset border) directly.

.tab-pane:focused > .tab-header-area > .headers-region > .tab:selected .focus-indicator {
    -fx-focus-color: transparent;
    -fx-faint-focus-color: transparent;
}

I used the specific class here, but it also works with the tab class.

.tab {
    -fx-focus-color: transparent;
    -fx-faint-focus-color: transparent;
}
Prometheus
  • 1,005
  • 6
  • 16
  • I realize this is crazy old but I have not been able to find documentation on .focus-indicator. How did you determine this to be the part of the CSS? – Dallas Phillips Jun 29 '21 at 00:47
0

Try the following:

 .tab-pane > .tab-header-area > .headers-region > .tab:selected 
{
 -fx-focus-color:  transparent;  //red;
}
Kachna
  • 2,921
  • 2
  • 20
  • 34