当前位置: 代码迷 >> 综合 >> CSS修饰Javafx TabPane
  详细解决方案

CSS修饰Javafx TabPane

热度:58   发布时间:2023-11-13 16:09:54.0

使用CSS修饰Javafx TabPane的样式

/* 修改TabPane的Pane区域背景颜色 */
.tab-pane {
    -fx-background-color: #e6e6e6;
}
/* 修改Tab的背景颜色 */
.tab {
    -fx-background-color: #333333;
}
/* 修改顶栏的背景颜色 */
.tab-pane>*.tab-header-area>*.tab-header-background
{
    -fx-background-color: -fx-outer-border, -fx-text-box-border, #333333;
}
/* 修改Tab中文本的颜色 */
.tab-label {
    -fx-text-fill: #e6e6e6;
}
/* 子代选择器,Tab选中的时候选择其子元素tab-label */
.tab:selected .tab-label {
    -fx-text-fill: #003333ff;
}
/* tab选中时设置背景颜色 */
.tab:selected {
    -fx-background-color: #990000ff;
}
/* Tab选中的时候选中其边框并修改样式 */
.tab-pane:focused > .tab-header-area > .headers-region > .tab:selected .focus-indicator {
    -fx-border-radius: 0px;-fx-border-width: 1px 1px 1px 1px;-fx-border-color: #4d1a4dff;
}

实现效果:
在这里插入图片描述

  相关解决方案