使用CSS从焦点选项卡中删除发光边框 [英] Remove the glowing border from focused tab with CSS

问题描述

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

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?

这是我目前的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 我收到错误

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

推荐答案

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

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

您还可以设置焦点颜色和微弱焦点颜色（用于inset border）。

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

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

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

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

这篇关于使用CSS从焦点选项卡中删除发光边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！