Question

目前在JavaFX和CSS样式表方面存在一些问题。我希望选定的标签文本为黑色，并将未选中的标签设为白色。我能够将活动标签的背景颜色变成比其他标签更深的蓝色，但在标签周围仍然有一个尴尬的区域。

以下是首次打开时的应用：首次公开赛

点击选项卡时，这是应用程序：首先点击

在第二张图像上，文本在背景颜色中完全丢失。如果你能帮助我摆脱标签本身周围的空间，那也是很棒的！

这是我的CSS文件：

＆＃13;

/*main.css*/

/*set individual tab properties*/
.tab {
    -fx-background-color: #1c6fb8;
    -fx-font: 16px "Helvetica Neue" ;
    -fx-background-radius: 0;
}

.tab-label {
    -fx-text-fill: #fff;
}

.tab:focused .tab-label {
    -fx-text-fill: #000;
}

.tab-header-background {
    -fx-background-color: #1c6fb8;
}

.tab-pane {
    -fx-tab-min-width:120px;
    -fx-tab-max-width:120px;
    -fx-tab-min-height:50px;
    -fx-tab-max-height:50px;
    -fx-background-color: #15558c;
}

.tab:selected {
    -fx-text-fill: #000;
    -fx-background-color: #15558c;
}

.tab-pane:focused > .tab-header-area > .headers-region > .tab:selected .focus-indicator {
    -fx-background-color: #15558c;
}

＆＃13;

提前致谢！

Answer 1

密码：

.tab-pane .tab:selected
{
    -fx-background-color: #15558c;
}

.tab:selected .tab-label 
{ 
    -fx-text-fill: #000;
    -fx-background-color: #15558c;
}

完整代码：

.tab {
    -fx-background-color: #1c6fb8;
    -fx-font: 16px "Helvetica Neue" ;
    -fx-background-radius: 0;
}

.tab-label {
    -fx-text-fill: #fff;
}

.tab:focused .tab-label {
    -fx-text-fill: #000;
}

.tab-header-background {
    -fx-background-color: #1c6fb8;
}

.tab-pane {
    -fx-tab-min-width:120px;
    -fx-tab-max-width:120px;
    -fx-tab-min-height:50px;
    -fx-tab-max-height:50px;
    -fx-background-color: #15558c;
}

/*.tab:selected {
    -fx-text-fill: #000;
    -fx-background-color: #15558c;
}*/

.tab-pane .tab:selected
{
    -fx-background-color: #15558c;
}

.tab:selected .tab-label { 
    -fx-text-fill: #000;
    -fx-background-color: #15558c;
}

首次开放：

首先点击：

JavaFX选项卡文本和大小问题

1 个答案: