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

【问题标题】：Remove the glowing border from focused tab with CSS使用 CSS 从焦点选项卡中删除发光边框
【发布时间】：2015-12-13 09:28:47
【问题描述】：

我正在尝试删除蓝色发光边框，当窗格聚焦于我的 javaFX 应用程序中的选项卡中的选项卡时，该边框会出现。关于如何在 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 我得到一个错误

【问题讨论】：

大纲：无；应该是 CSS 规则，但我不使用 javaFX，所以我不确定这是否是你要找的。抱歉，如果不是。
相关但不相同的问题：How do I remove the default border glow of a JavaFX button (when selected)?
-fx-focus-color: transparent 对我不起作用我可以看到选项卡和边框颜色之间有一点区别

标签： java css user-interface javafx

【解决方案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 {
    -fx-focus-color: transparent;
    -fx-faint-focus-color: transparent;
}

【讨论】：

我意识到这已经过时了，但我无法在 .focus-indicator 上找到文档。您如何确定这是 CSS 的一部分？

【解决方案2】：

尝试以下方法：

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

【讨论】：

工作它的边框颜色为红色，但我不能让它适合做派生（-fx-base，60%）
适用于透明，但我看到不同之处应该是标签的颜色相同