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.

How can I get white-text on black-background for TextArea? Or, any set, non-white background?
What is the white-background area in front of the yellow-background I can see in Scene Builder and in the Preview window?
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.

I think you've missed something but it's hard to know what from your description. It sounds like you have your background color inheritance setup incorrectly. Can you post the CSS you are using? Are you using an custom style classes? — OttPrime
I can refute that. It is simple to reproduce. In Scene Builder -- AnchorPane, set -fx-background-color:black. Drop a TextArea. It is white. Set -fx-background-color:yellow (say). TextArea will still be white. If you look closely you ought to see a yellow hallo around the white. I have updated the question with the most simplest FXML example. — will

OttPrime OttPrime · Accepted Answer · 2014-06-18T13:41:18

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.

What is the secret to set a custom TextArea background?

2 Answers