使用CSS从焦点选项卡中删除发光边框

Question

我正在尝试删除蓝色发光边框，当窗格聚焦在我的javaFX应用程序的tabpane中的选项卡时会出现这种情况。关于如何在css中执行此操作的任何想法？

这是我目前的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%);
}

但我不知道哪个值我应该给予焦点颜色以匹配背景derive(-fx-base, 60%)我可以看到差异，如果我将其设置为-fx-background-color我会收到错误

Answer 1

实现此目的的一种方法是将边框颜色设置为透明。

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

您也可以直接设置焦点颜色和微弱焦点颜色（用于插入边框）。

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

我在这里使用了特定的类，但它也适用于tab类。

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

Answer 2

尝试以下方法：

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