How to override css [part="input-field"] of TextField Component's CSS?

What version of Vaadin are you using?

For V14 (in non-compatibility mode), You can add this annotation on the view: @CssImport(value="./styles/textfieldstyles.css", themeFor="vaadin-text-field" )

then in {project}/frontend/styles/textfieldstyles.css, put this:

[part~="input-field"] {
	background-color: red;
}

For V13, put this in your shared-styles.html file:

<dom-module id="custom-textfield" theme-for="vaadin-text-area">
 <template>
   <style>
     [part~="input-field"] {
       background-color: red;
     }
   </style>
  </template>
</dom-module>

works for changing style (background for the input-part of the text-field) for all text-fields in the scope of the import, but how do you change input-background on a single text-field?

Niels Nachname: works for changing style (background for the input-part of the text-field) for all text-fields in the scope of the import, but how do you change input-background on a single text-field?

Hi Niels, You can add theme for a single text-field like this:

TextField specialTextField = new TextField();

specialTextField.getElement().getThemeList().add("special-text-type");

In the css file (e.g.: textfieldstyles.css) you can define special css for only that text field like this:

:host([special-text-type"]) [part="input-field"] {

width: background-color: red;

}

You can add this annotation on the view, as Thomas described above:

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

Andor Németh:

Niels Nachname: works for changing style (background for the input-part of the text-field) for all text-fields in the scope of the import, but how do you change input-background on a single text-field?

Hi Niels, You can add theme for a single text-field like this:

TextField specialTextField = new TextField();

specialTextField.getElement().getThemeList().add("special-text-type");

In the css file (e.g.: textfieldstyles.css) you can define special css for only that text field like this:

:host([special-text-type"]) [part="input-field"] {

width: background-color: red;

}

You can add this annotation on the view, as Thomas described above:

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

Great answer! Thank you! I just want to mention that you need to use

:host([theme="special-text-type"]) [part="input-field"] {

width: background-color: red;
}