Search code examples
javacssvaadinvaadin22

Styling vaadin-input-container

How to styling new element in Vaadin Flow v.22 vaadin-input-container through common css?

@CssImport(value = "./themes/mystyle/components/vaadin-input-container.css", themeFor = "vaadin-input-container")

and

[part="input-field"] {
  box-shadow: inset 0 0 0 1px var(--lumo-contrast-30pct);
  background-color: var(--lumo-base-color);
}

not work.

Thanks!

Solution

  • vaadin-input-container itself is [part="input-field"], i.e. [part="input-field"] is not child of vaadin-input-container. Thus you need to use :host as selector.

    :host {
   box-shadow: inset 0 0 0 1px var(--lumo-contrast-30pct);
   background-color: var(--lumo-base-color);
}