如何修改Vaadin中只读TextField的样式：实现无边框与自定义背景色

方法1：自定义CSS类（推荐） #

1. 给目标TextField添加自定义CSS类：

TextField readOnlyField = new TextField("只读输入框");
readOnlyField.setReadOnly(true);
readOnlyField.addClassName("custom-readonly-field");

2. 在项目的CSS文件（如styles.css或主题专属样式文件）中添加样式规则：

/* 基础样式：无边框+自定义背景色 */
.custom-readonly-field[readonly] {
    border: none;
    background-color: #f0f0f0; /* 替换为你需要的颜色值 */
}

/* 可选：移除聚焦时的边框和阴影，保持样式统一 */
.custom-readonly-field[readonly]:focus {
    outline: none;
    box-shadow: none;
}

方法2：内联样式（快速测试场景） #

如果只是临时调试或单个组件需要特殊样式，可以直接设置内联样式：

TextField readOnlyField = new TextField("只读输入框");
readOnlyField.setReadOnly(true);
readOnlyField.getStyle()
    .set("border", "none")
    .set("background-color", "#f0f0f0");

方法3：全局主题修改（所有只读TextField生效） #

如果希望项目中所有只读TextField都应用该样式，直接修改主题CSS：

vaadin-text-field[readonly] {
    border: none;
    background-color: #f0f0f0;
}

vaadin-text-field[readonly]:focus {
    outline: none;
    box-shadow: none;
}

注意事项 #

• 确保CSS文件已正确引入项目，Vaadin会自动处理主题样式的加载逻辑。
• 不同Vaadin版本的组件选择器可能略有差异（如Vaadin 24使用vaadin-text-field标签），请根据实际版本调整选择器。
• 若样式被默认主题覆盖，可在样式属性后添加!important（仅必要时使用，避免破坏样式优先级）：

.custom-readonly-field[readonly] {
    border: none !important;
    background-color: #f0f0f0 !important;
}

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