Skip to Main Content

Java SE (Java Platform, Standard Edition)

Announcement

For appeals, questions and feedback, please email oracle-forums_moderators_us@oracle.com

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

cshSep 2 2016 — edited Sep 9 2016

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;

}

Comments
Locked Post
New comments cannot be posted to this locked post.
Post Details
Locked on Oct 7 2016
Added on Sep 2 2016
1 comment
1,768 views