使用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;
}