TextArea 的 JavaFX CSS 样式不起作用答案

【问题标题】：JavaFX CSS styling of TextArea does not workTextArea 的 JavaFX CSS 样式不起作用
【发布时间】：2014-02-01 03:04:22
【问题描述】：

我正在编写一个简单的 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，但确实按预期应用了背景颜色。

Picture of my problem

有什么线索吗？

【问题讨论】：

我认为您可能在这里遇到了特异性问题。这是您在该页面上使用的所有 css 样式吗？检查-fx-background-color 是否被另一个规则覆盖。你可以使用 firebug 之类的东西。

标签： java css javafx

【解决方案1】：

需要设置内容：

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

...

或者看看这个答案：Transparent background of a textarea in JavaFX 8

【讨论】：

【解决方案2】：

我遇到了同样的问题：我做了什么：

创建了一个名为 console.css 的 .css 文件，其内容如下：

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

在我的场景中调用：

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 （推荐）。

良好的编程:-)

【讨论】：

【解决方案3】：

你在使用场景构建器吗？

我尝试了您使用的相同 css，一切正常，可能是您的版本中的错误。

我测试了它的文本区域和文本字段。

【讨论】：

你检查它没有被覆盖吗？

【解决方案4】：

您应该使用 -fx-control-inner-background，例如用于 id=textAreaField 的 TextArea：

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

您可以了解更多信息，请参阅此主题： Textarea javaFx Color

【讨论】：

【解决方案5】：

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

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

【讨论】：