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?

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. — jax, Feb 01 '14 at 03:47

score 18 · Answer 1 · edited May 23 '17 at 11:45

18

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

edited May 23 '17 at 11:45

Community

1
1

answered Sep 26 '14 at 08:36

tonimaroni

1,062
10
19

score 3 · Answer 2 · edited Jan 21 '23 at 16:25

I had the same problem: What I did:

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;
 }

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

score 1 · Answer 3 · answered Feb 01 '14 at 03:34

1

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.

answered Feb 01 '14 at 03:34

sandiego

151
1
4
10

Did you check it is not overridden? – sandiego Feb 06 '14 at 23:44

score 1 · Answer 4 · answered Dec 11 '18 at 08:43

1

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

answered Dec 11 '18 at 08:43

H. Najafi

11
1

score 0 · Answer 5 · answered Aug 18 '17 at 06:19

0

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 { }

answered Aug 18 '17 at 06:19

Menai Ala Eddine - Aladdin

2,364
4
22
46

JavaFX CSS styling of TextArea does not work

5 Answers5

Linked