Forum Stats

  • 3,854,485 Users
  • 2,264,370 Discussions
  • 7,905,703 Comments

Discussions

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

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

Hi,

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.

App:

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) {

   launch(args);

  }

   @Override
   public void start(final Stage stage) throws Exception {

  TabPane tabPane = new TabPane();

  tabPane.setTabClosingPolicy(TabPane.TabClosingPolicy.UNAVAILABLE);

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

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

  Scene scene = new Scene(tabPane);

  stage.setScene(scene);

  scene.getStylesheets().addAll("styles.css");

  stage.show();

  }

}

styles.css:

.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;

}

Answers

  • 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.