Remove a luminous border from a focused tab using CSS

Question

I am trying to remove the blue glowing border that appears when the panel is oriented to the tab in tabpane in my javaFX application. any idea on how to do this in css?

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 don’t know what value should I give the focuse color according to the derive(-fx-base, 60%) background derive(-fx-base, 60%) , I see the difference, and if I set it to -fx-background-color , I get an error

Answer 1

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

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

You can also set the focus color and weak focus color (used for the border of the insert).

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

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

 .tab { -fx-focus-color: transparent; -fx-faint-focus-color: transparent; } 

Answer 2

Try the following:

  .tab-pane > .tab-header-area > .headers-region > .tab:selected { -fx-focus-color: transparent; //red; }