JavaFX中TextArea的CSS样式不起作用。

Question

我正在编写一个简单的JavaFX应用程序，但是我无法使一些CSS样式生效。

问题出在对于TextArea的-fx-background-color属性上。

以下是相关的CSS代码：

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

除了 -fx-background-color，所有字段都按预期执行，但是看起来没有任何作用。 我仍然有默认的白色背景。 如图所示，下面的 TextField 具有相同的 CSS，但会按预期应用背景颜色。

我的问题截图

有什么线索吗？

- Actimia

---

我认为你可能在这里遇到了特定性问题。这是你在该页面上使用的所有CSS样式吗？检查一下-fx-background-color是否被另一个规则覆盖了。你可以使用类似Firebug的工具。 - jax

Answer 1

您需要设置内容：

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

或者也可以查看这个答案：JavaFX 8中文本区域的透明背景

- tonimaroni

Answer 2

我曾经遇到过同样的问题：我的解决方法是：

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());

说明：

• 第二部分只是加载CSS样式（琐碎）
  
  
• 第一部分（CSS）：您需要检查哪个属性应该应用于对象的哪个部分。例如：-fx-font-family在.text-area上，而-fx-background-color在.content上。理解这个概念可以让您理解JavaFx中的所有CSS内容。
  
  JavaFX-CSS-Docu （推荐阅读）。

祝编程愉快 :-)

- Alessandro Giusa

Answer 3

你正在使用场景构建器吗？

我尝试了与你使用相同的CSS，一切正常，也许是你的版本中存在的错误。

我已经对文本区域和文本字段进行了测试。

- sandiego

---

你检查过它没有被覆盖吗？ - sandiego

Answer 4

你应该使用-fx-control-inner-background，例如对于一个id为textAreaField的TextArea：

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

如果您需要更多信息，请查看此主题： Textarea javaFx Color

- H. Najafi

Answer 5

在JavaFx中，TextArea有两个子结构（Content和ScrollPane），每个结构都具有TextInputControl的所有属性：

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

- Menai Ala Eddine - Aladdin