This site is currently read-only as we are migrating to Oracle Forums for an improved community experience. You will not be able to initiate activity until January 30th, when you will be able to use this site as normal.

    Forum Stats

  • 3,890,321 Users
  • 2,269,776 Discussions


How to use CSS ladder on Tab's header text?

csh Member Posts: 525
edited Sep 9, 2016 5:27PM in JavaFX 2.0 and Later


I have a TabPane which I've customized with CSS. I want a dark background when a Tab is hovered or selected. but also want a bright text-fill color for the Tab header text.

I hoped I could solve this by using the CSS ladder function, in fact TabPane already uses it, but it has no effect.

Can somebody help?

The goal is that the tab header text color adapts to the Tab's background color, preferably using CSS ladder.


import javafx.application.Application;

import javafx.scene.Scene;

import javafx.scene.control.Tab;

import javafx.scene.control.TabPane;

import javafx.stage.Stage;

public class TestApp3 extends Application {

   public static void main(String[] args) {



   public void start(final Stage stage) throws Exception {

  TabPane tabPane = new TabPane();


  tabPane.getTabs().add(new Tab("Tab1"));

  tabPane.getTabs().add(new Tab("Tab2"));

  Scene scene = new Scene(tabPane);






.tab-pane > .tab-header-area > .headers-region > .tab > .tab-container > .tab-label {

   -fx-text-fill: ladder(-fx-background, white 49%, black 50%); /* Has no effect, what I am doing wrong? */

.tab-pane > .tab-header-area > .headers-region > .tab {

   -fx-background-color: #000000;


.tab-pane > .tab-header-area > .headers-region > .tab:hover {

   -fx-background-color: #000000;


.tab-pane > .tab-header-area > .headers-region > .tab:selected {

   -fx-background-color: -fx-background;



  • bekwam
    bekwam Member Posts: 6
    edited Sep 9, 2016 5:27PM

    Try this

    .tab {

       -fx-background-color: white;


    .tab:hover, .tab:selected {

       -fx-background-color: black;


    .tab-label {

       background: white;

       -fx-text-fill: ladder(background, white 49%, black 50%);


    .tab-label:hover, .tab:selected > .tab-container > .tab-label {

       background: black;

       -fx-text-fill: ladder(background, white 49%, black 50%);


This discussion has been closed.