Vaadin change Textfield Label color

user_11460292 0
Viewed 385

I am looking for a easy way to change the Label color of the Vaadin TextField Component. It changes automatically to blue when the Textfield is on focus, but I need to change it to another color. First I tried it to change it in the css file like this:

color: <anycolor>;

But this has only changed the input text color. Is there a way to change only the color of the label? I am using Vaadin 14.

vaadin14 vaadin css java
1 Answers

If you check the CSS applied to the <label> tag in the browser DevTools (F12 or Ctrl+Shift+C), you'll see that it's

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

There's 2 options how to customize that:

  1. Change the variable. You can write --lumo-primary-text-color: green; to set the value of that variable in your global CSS. Multiple options:

    1. on that one specific textField textField.getStyle().set("--lumo-primary-text-color", "green"), or
    2. Apply it to fields with a class, textField.addClassName("green-text") 
      green-text {
    --lumo-primary-text-color: green;
}
      , or
    3. Apply it to ALL text fields: 
      vaadin-text-field {
    --lumo-primary-text-color: green;
}

  2. Overload the CSS with a more specific rule. You'll need to add this to vaadin-text-field's shadow DOM with

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

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