Discussions
Categories
- 385.5K All Categories
- 5.1K Data
- 2.5K Big Data Appliance
- 2.5K Data Science
- 453.4K Databases
- 223.2K General Database Discussions
- 3.8K Java and JavaScript in the Database
- 47 Multilingual Engine
- 606 MySQL Community Space
- 486 NoSQL Database
- 7.9K Oracle Database Express Edition (XE)
- 3.2K ORDS, SODA & JSON in the Database
- 585 SQLcl
- 4K SQL Developer Data Modeler
- 188K SQL & PL/SQL
- 21.5K SQL Developer
- 46 Data Integration
- 46 GoldenGate
- 298.4K Development
- 4 Application Development
- 20 Developer Projects
- 166 Programming Languages
- 295K Development Tools
- 150 DevOps
- 3.1K QA/Testing
- 646.7K Java
- 37 Java Learning Subscription
- 37.1K Database Connectivity
- 201 Java Community Process
- 108 Java 25
- 22.2K Java APIs
- 138.3K Java Development Tools
- 165.4K Java EE (Java Enterprise Edition)
- 22 Java Essentials
- 176 Java 8 Questions
- 86K Java Programming
- 82 Java Puzzle Ball
- 65.1K New To Java
- 1.7K Training / Learning / Certification
- 13.8K Java HotSpot Virtual Machine
- 94.3K Java SE
- 13.8K Java Security
- 208 Java User Groups
- 25 JavaScript - Nashorn
- Programs
- 667 LiveLabs
- 41 Workshops
- 10.3K Software
- 6.7K Berkeley DB Family
- 3.6K JHeadstart
- 6K Other Languages
- 2.3K Chinese
- 207 Deutsche Oracle Community
- 1.1K Español
- 1.9K Japanese
- 474 Portuguese
How to use CSS ladder on Tab's header text?

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
-
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%);
}