CODEWITHSUNDEEP
cssjavafx
bluevoxel
bluevoxel

Reputation: 5358

Different font color for not selected tab's tab-label

I try to style Java FX 8 TabPane component via CSS. Currently I'm struggling with different font color for selected and not selected tab-label. At the end, I want selected tab to have white font color, and not selected tab to have black font color. Unfortunately, I don't know how to refer to not selected or only to selected tab-label. I tried .tab-label:selected but it didn't work. I also tried something as .tab:selected > .tab-label but again, didn't work.

Below is CSS code I wrote so far and preview of the TabPane.

#tabPane {
    -fx-background-color: #FFFFFF;
}

#tabPane .tab-header-background {
    -fx-background-color: #FFFFFF;
}

#tabPane .tab {
    -fx-background-color: #d0d0d0;
    -fx-background-radius: 0;
    -fx-padding: 5 10 10 10;
}

#tabPane .tab:selected {
    -fx-background-color: #202020;
    -fx-focus-color: transparent;
}

#tabPane .tab-label {
    -fx-text-fill: #FFFFFF;
    -fx-font-size: 18px;
}

enter image description here

PS Mentioned TabPane was modified only by above CSS code. There are no other modifications. Thus, no additional code.

Upvotes: 2

Views: 3601

Answers (1)

James_D
James_D

Reputation: 209339

I think 

#tabPane .tab:selected .tab-label {
    -fx-text-fill: black ;
}

should work. It may be important to have that after your #tab-pane .tab-label rule.

Upvotes: 4

Related Questions