JavaFX 选项卡文本和大小问题答案

【问题标题】：JavaFX Tab Text and Size IssuesJavaFX 选项卡文本和大小问题
【发布时间】：2018-06-05 04:17:23
【问题描述】：

目前在 JavaFX 和 CSS 样式表方面存在一些问题。我想让选定的选项卡文本为黑色，而未选定的选项卡为白色。我能够使活动标签的背景颜色比其他标签更深，但标签周围仍然有一个尴尬的区域。

这是首次打开时的应用程序：首次公开

这是我点击标签时的应用程序：首次点击

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

这是我的 CSS 文件：

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

提前致谢！

【问题讨论】：

标签： css javafx tabs

【解决方案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;
}

首次打开：

首次点击：

【讨论】：