如何在JavaFX TextArea中删除此灰色顶部边框

Question

我想要一个完全没有边框且没有背景效果的textarea。只是纯白色。我尝试删除边框和背景，但是这个奇怪的灰色边框保留在textarea的顶部。

根据那里的“投诉”一词，这是一个文本区域。我删除了所有内容，但灰线仍然存在。

textArea.setStyle("-fx-background-color: #fff; -fx-border-color: #fff; -fx-border-width: 0; -fx-border-image-width: 0; -fx-background-image: null; -fx-region-background: null;-fx-border-insets: 0; -fx-background-size:0; -fx-border-image-insets:0;");

Answer 1

在JavaFX 8中，像这样：

.text-area {
    -fx-background-insets: 0;
    -fx-background-color: transparent, white, transparent, white;
}

.text-area .content {
    -fx-background-color: transparent, white, transparent, white;
}

.text-area:focused .content {
    -fx-background-color: transparent, white, transparent, white;
}

.text-area:focused {
    -fx-highlight-fill: #7ecfff;
}

.text-area .content {
    -fx-padding: 10px;
    -fx-text-fill: gray;
    -fx-highlight-fill: #7ecfff;
}

Answer 2

这可能有点晚了，但它可能有助于那里的人！

我需要使用JavaFx TextArea来显示多行文字，我想要你描述的相同外观：没有边框，只有文字。

这是我使用的样式：

textArea.setStyle("-fx-focus-color: transparent; -fx-text-box-border: transparent;");

Answer 3

可以在modena.css文件中找到应用于TextArea的实际样式。如果要覆盖任何css属性，则需要查找所有可能的样式类和伪类，然后查找给定属性的所有可能的值序列（用逗号分隔）。

对于背景颜色属性，这些是默认值：

.text-area {
    -fx-background-color: linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
        derive(-fx-base,-1%);
}
.text-area .content {
    -fx-background-color:
        linear-gradient(from 0px 0px to 0px 4px, derive(-fx-control-inner-background, -8%), -fx-control-inner-background);
}
.text-area:focused .content {
    -fx-background-color: 
        -fx-control-inner-background,
        -fx-faint-focus-color,
        linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
}

因此，如果您想要一个没有边框的完全白色区域，那么这些值必须覆盖到：

.text-area{
    -fx-background-color: #fff, #fff;
}

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

.text-area:focused .content {
    -fx-background-color: #fff;
}