Styling vaadin-input-container

Question

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!

Answer 1

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);
}