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?

Infringement

I think you may have the specificity issue here.Is this all of the css style that you are using on that page? check to see if the -fx-background-color is overridden by another rule. You can use something like firebug. – Mcinnis

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

Caterer

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 :-)

Felipa

Answer 3

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

Chinquapin

Answer 4

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.

Nierman

Did you check it is not overridden? – Nierman

Answer 5

In JavaFx ,TextArea has two substuctures (Content & scrollPane) ,for each structure has all properties of TextInputControl :

         text-area{ }
         text-area .content { }
         text-area.scroll-pane { }

Interventionist