Scene Builder设置Textarea背景色却仅改边框的问题求助

问题根源 #

JavaFX的TextArea默认是双层结构：外层容器 + 内部.content文本显示区。默认样式里.content有独立背景色，直接设置-fx-background-color只会修改外层容器的背景（视觉上像边框），内部文本区的默认背景会把它盖住；另外默认的-fx-background-insets和-fx-border-insets不为0，导致边框和容器边缘有间距，没法铺满整个区域。

解决代码 #

在Scene Builder的TextArea样式输入框里添加以下CSS：

/* 配置外层容器样式 */
.text-area {
    -fx-background-color: #e0f7fa; /* 替换成你要的背景色 */
    -fx-background-insets: 0; /* 消除背景与容器边缘的空隙 */
    -fx-border-color: #00acc1; /* 替换成你要的边框色 */
    -fx-border-width: 2px; /* 调整边框粗细 */
    -fx-border-insets: 0; /* 让边框铺满整个容器 */
    -fx-padding: 8px; /* 调整文本和边框的内边距，避免内容贴边 */
}

/* 让内部文本区继承外层背景色 */
.text-area .content {
    -fx-background-color: transparent;
}

操作步骤 #

1. 选中Scene Builder里的TextArea组件
2. 切到Properties面板的Style选项
3. 把上述代码粘贴到样式输入框，替换颜色、尺寸参数为你需要的值

内容的提问来源于stack exchange，提问作者skver