更改JavaFx标签默认外观

Question

我正在尝试使用CSS更改JavaFx标签的默认外观。

我已经成功实现了以下效果:

我想要的是第一个标签左侧不应有间隙。

请问有人可以指点我如何实现吗？

下面是我想要实现的输出结果:

我使用了以下CSS：

.tab-pane .tab-header-area .tab-header-background {
    -fx-opacity: 0;
}

.tab-pane
{
    -fx-tab-min-width:90px;
}

.tab{
    -fx-background-insets: 0 1 0 1,0,0;
}
.tab-pane .tab
{
    -fx-background-color: #e6e6e6;

}

.tab-pane .tab:selected
{
    -fx-background-color: #3c3c3c;
}

.tab .tab-label { 
    -fx-alignment: CENTER;
    -fx-text-fill: #828282;
    -fx-font-size: 12px;
    -fx-font-weight: bold;
}

.tab:selected .tab-label { 
    -fx-alignment: CENTER;
    -fx-text-fill: #96b946;
}

- Vipul

---

只想提醒一下你，你提供的CSS已经极大地帮助了我 :) - xeruf

Answer 1

你还应该覆盖CSS：

.tab-pane:top *.tab-header-area {
    -fx-background-insets: 0, 0 0 1 0;
 /* -fx-padding: 0.416667em 0.166667em 0.0em 0.833em; /* 5 2 0 10 */
    -fx-padding: 0.416667em 0.166667em 0.0em 0.0em; /* overridden as 5 2 0 0 */
}

这里将标签页标题区的左内边距从10改为0。此外，您还需要以相同方式覆盖其他CSS选择器：.tab-pane:bottom，.tab-pane:left和.tab-pane:right，以适用于TabPane的不同javafx.geometry.Side。

- Uluk Biy