时间戳

首页 > 解决方案 > Vaadin 更改文本字段标签颜色

java - Vaadin 更改文本字段标签颜色

问题描述

我正在寻找一种简单的方法来更改 Vaadin TextField 组件的标签颜色。当 Textfield 处于焦点时，它会自动变为蓝色，但我需要将其更改为另一种颜色。首先，我尝试在 css 文件中更改它，如下所示：

color: <anycolor>;

但这只是改变了输入文本的颜色。有没有办法只改变标签的颜色？我正在使用 Vaadin 14。

标签： javacssvaadinvaadin14

解决方案

如果您在浏览器 DevTools（F12 或 Ctrl+Shift+C）中检查应用于<label>标签的 CSS，您会看到它是

:host([focused]:not([readonly])) [part="label"] {
    color: var(--lumo-primary-text-color);
}

有 2 个选项如何自定义：

  1. 更改变量。 您可以编写以在全局 CSS--lumo-primary-text-color: green;中设置该变量的值。多种选择：

    1. 在那个特定的 textField 上textField.getStyle().set("--lumo-primary-text-color", "green")，或
    2. 将其应用于具有类的字段，textField.addClassName("green-text") 
      green-text {
    --lumo-primary-text-color: green;
}
      ， 或者
    3. 将其应用于所有文本字段： 
      vaadin-text-field {
    --lumo-primary-text-color: green;
}

  2. 用更具体的规则重载 CSS。您需要将其添加到vaadin-text-field的影子 DOM中

    @CssImport(value = "./styles/path/yout-vaadin-text-field.css", 
themeFor = "vaadin-text-field")

    :host(.green-text[focused]:not([readonly])) [part="label"] {
     color: green;
}

推荐阅读