cssjavafxfxmlscenebuilder

JavaFX Scene Builder: How to set text color in ComboBox?

I created a JavaFX ComboBox with JavaFX Scene Builder 21.0.0.

enter image description here

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.ComboBox?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.text.Font?>
<StackPane xmlns="http://javafx.com/javafx/21" xmlns:fx="http://javafx.com/fxml/1" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="146.0" prefWidth="404.0">
   <children>
      <AnchorPane prefHeight="236.0" prefWidth="432.0">
         <children>
            <AnchorPane layoutX="8.0" layoutY="14.0" prefHeight="117.0" prefWidth="387.0">
               <children>
                  <ComboBox layoutX="38.0" layoutY="47.0" prefHeight="26.0" prefWidth="300.0" promptText="REINER SCT cyberJack pinpad/e-com USB 52" style="-fx-font-weight: bold; -fx-background-color: #005f6a; -fx-font-family: &quot;Open Sans&quot;; -fx-font-size: 20.0px; -fx-text-fill: white;" />
                  <Label layoutX="38.0" layoutY="14.0" style="-fx-font-weight: bold; -fx-font-family: &quot;Open Sans&quot;; -fx-font-size: 20.0px;" text="Please select a card reader:">
                     <font>
                        <Font name="System Bold" size="20.0" />
                     </font>
                  </Label>
               </children>
            </AnchorPane>
         </children>
      </AnchorPane>
   </children>
</StackPane>

I set the text color to white, but the text is still black.

JavaFX Scene Builder Configuration

JavaFX Scene Builder Configuration

Any ideas how to resolve this issue?

Solution

  • As mentioned by @Billie, the best approach is to declare the styling in the CSS and include in SceneBuilder. This way you precisely know what you are styling.

    Having said that, the main reason that setting -fx-text-fill on combo-box not working is, that the feature of applying text fills or colors cannot be inherited. Only Font attributes (family, size, style & weight) can be inherited from parent node. Thats why all the font settings on ComboBox are applied on the inner Label but not the -fx-text-fill.

    Text fills or colours are applied in the CSS either directly or from a pre defined variable declared at root level.

    Below is the styling in modena.css for the ComboBox inner label and arrow:

    .combo-box > .list-cell {
    -fx-background: transparent;
    -fx-background-color: transparent;
    -fx-text-fill: -fx-text-base-color;
    -fx-padding: 0.333333em 0.666667em 0.333333em 0.666667em; /* 4 8 4 8 */
}
.combo-box-base > .arrow-button > .arrow {
    -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
   ...
}

    If you notice the colors are set from the variables -fx-text-base-color and -fx-mark-color respectively. So you can override these variables at ComboBox level so that all its children will then use those values. (Similar to what @jewelsea mentioned in his comment).

    enter image description here