JavaFX CSS styling of TextArea does not work

Question

I'm writing a simple JavaFX application, but I can't get some of the CSS styling to work. The problem is the -fx-background-color property for my TextArea.

This is the relevant CSS:

.text-area {
  -fx-font-family: Consolas;
  -fx-highlight-fill: #00ff00;
  -fx-highlight-text-fill: #000000;
  -fx-text-fill: #00ff00;
  -fx-background-color: #000000;
}

All the fields perform as expected, except -fx-background-color, which apparently does nothing. I still have the default white background. As you can see in the picture, the TextField below, which has identical CSS, but does apply the background color as expected.

Picture of my problem

Any clues?

Answer 1

You need to set the content:

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

...

Or see this answer maybe: Transparent background of a textarea in JavaFX 8

Answer 2

I had the same problem: What I did:

1. Created a .css file called console.css with following content:

   .text-area {
       -fx-font-family: Consolas;
       -fx-font-size: 15;
       -fx-text-fill: #ffffff;
       -fx-display-caret:true;
   }
   
   .text-area .content {
       -fx-background-color: #000000;
   }
   

2. On my scene called:

   scene.getStylesheets().add(this.getClass() .getResource("/stylesheets/console.css").toExternalForm());

Explanation:
- The second part just loads the css stuff. (trivial)

- The fist part (css): You have to check which property has to be applied on which part of the object. For instance: -fx-font-family is on .text-area but -fx-background-color is on .content. Understanding this concept let you understand all of the css stuff in JavaFx.

JavaFX-CSS-Docu (recommended).

Good programming :-)

Answer 3

Are you using scene builder?

I tried the same css you use and everything works fine, maybe it's a bug in your version.

I tested it for text-area and text-field.

Answer 4

You should use -fx-control-inner-background for example for a TextArea with id=textAreaField:

#textAreaField {
-fx-control-inner-background: #000000;
-fx-text-fill: #ffffff;}

and you can for more information, see this topic: Textarea javaFx Color