What is the secret to set a custom TextArea background?

Question

This question follows some 'discovery(s)' about the JavaFX TextArea control. I have reached the stage to ask if I have a bug and/or what is the work around?

JavaFX JavaDoc

The TextArea JavaDoc, FXML doc and JavaFX CSS doc show the -fx-background-color attribute as inherited from the Region, via:

• javafx.scene.layout.Region
  • javafx.scene.control.Control
    • javafx.scene.control.TextInputControl
      • javafx.scene.control.TextArea

The explicitly properties are inherited from the Region:

Properties inherited from class javafx.scene.layout.Region

background, border, cacheShape, centerShape, height, insets, maxHeight, maxWidth, minHeight, minWidth, opaqueInsets, padding, prefHeight, prefWidth, scaleShape, shape, snapToPixel, width

I have been having no luck. My AnchorPane is: black-background with white-text. The TextArea control I dropped on to my Anchor pane in Scene Builder is white-background with white-text. I thought I had no text until I used Scene Builder to set a local-style: -fx-text-fill: grey; then I saw the text.

I applied the same CSS style I'm using for the AnchorPane directly to to the TextArea -- The background remains white. I used Scene Builder to set a local-style: -fx-background-color: yellow, and things get interesting.

With my region-background=black, I can see a yellow outline (presuming it's the TextArea's yellow backgound) behind a white-backgound display area, with grey text (for now). Of course if I remove the local-style on -fx-text-fill, I have white-text on white-backgound and a yellow behind (surround?).

EDIT ... Example:

 <?xml version="1.0" encoding="UTF-8"?>

 <?import javafx.scene.control.*?>
 <?import java.lang.*?>
 <?import javafx.scene.layout.*?>

 <AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" 
             prefHeight="400.0" prefWidth="600.0" 
             xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1"
             style="-fx-background-color: black;" >
    <children>
       <TextArea layoutX="211.0"    layoutY="108.0" 
                 prefHeight="200.0" prefWidth="200.0" 
                 style="-fx-background-color: yellow;" />
    </children>
 </AnchorPane>

Note two background-color style settings:

• AnchorPane: style="-fx-background-color: black;"
• TextArea: style="-fx-background-color: yellow;"

I haven't seen any mention for a composite control for the TextArea so far. There are some explicit questions that need to be answered I think.

1. How can I get white-text on black-background for TextArea? Or, any set, non-white background?
2. What is the white-background area in front of the yellow-background I can see in Scene Builder and in the Preview window?
3. Where is this information to be found for a similar oddity? If we have to did the source code, it might be as well to have an idea about how such entities are managed and defined.

Setting a different background would be something I'd expect people to want to do. Have I missed something? Thanks in advance.

Answer 1

The TextArea itself is made up of several elements with a CSS hierarchy that is a bit deep. At first glance it would seem that setting .text-area's -fx-background-color should do the trick but there is actually a ScrollPane with a StackPane (.viewport) and a Region (.content) you have to content with. In general, you can use some CSS like this to get what you want.

.text-area *.content {
    -fx-background-color: yellow;
}

You can use the SceneBuilder 2 CSS Analyzer to drill down into the TextArea and see what's happening there. Also, checkout the Java CSS Reference Guide if you haven't already.