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

Flow
1

Hi, all.

Can’t understand how to override this part of component’s css. I have my css class “search-text-field-header” on TextField, so I want take this div with part=“input-field” and set background: none. How I can do this?

Thanks.
17826949.png

2

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>
3

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?

4

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” )

5

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