形状的CSS不适用于javafx中的textarea

Question

我正在申请以下CSS。

.text-area .content {
    -fx-background-color: -lined-back;
    -fx-shape: "M 7 0 L 24 0 L 24 19 L 0 19 L 0 2 L 7 2 Z";
}

.text-area:focused .content {
    -fx-shape: "M 7 0 L 24 0 L 24 19 L 0 19 L 0 2 L 7 2 Z";
}

我的问题是它只改变背景的形状而不是整个组件。并且还在起始点开始编辑。如下图所示。

Answer 1

这些样式适用于HTML吗？我对javafx一无所知，但您目前正在.content内定位.text-area。您可能只需要定位.text-area本身：

.text-area,
.text-area .content {
    -fx-background-color: -lined-back;
    -fx-shape: "M 7 0 L 24 0 L 24 19 L 0 19 L 0 2 L 7 2 Z";
}

.text-area:focused,
.text-area:focused .content {
    -fx-shape: "M 7 0 L 24 0 L 24 19 L 0 19 L 0 2 L 7 2 Z";
}

你甚至可以仅定位.text-area，因为我认为它的孩子会受到其形状的限制。

.text-area {
    -fx-background-color: -lined-back;
    -fx-shape: "M 7 0 L 24 0 L 24 19 L 0 19 L 0 2 L 7 2 Z";
}

.text-area:focused {
    -fx-shape: "M 7 0 L 24 0 L 24 19 L 0 19 L 0 2 L 7 2 Z";
}