CODEWITHSUNDEEP
javacssjavafx
Actimia
Actimia

Reputation: 135

JavaFX CSS styling of TextArea does not work

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?

Upvotes: 10

Views: 31147

Answers (5)

Alessandro Giusa
Alessandro Giusa

Reputation: 1768

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

Upvotes: 3

H. Najafi
H. Najafi

Reputation: 21

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

Upvotes: 2

Ala Eddine Menai
Ala Eddine Menai

Reputation: 2870

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

Upvotes: 0

tonimaroni
tonimaroni

Reputation: 1093

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

Upvotes: 18

sandiego
sandiego

Reputation: 161

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.

Image

Upvotes: 1

Related Questions