Change background-color vaadin-text-field

Flow
1

How can I change background-color of vaadin-text-field ?
Vaadin 10.0.1
Thanks;

2

Here’s an example: https://vaadin.com/components/vaadin-text-field/html-examples/text-field-styling-demos

3

Jouni Koivuviita:
Here’s an example: https://vaadin.com/components/vaadin-text-field/html-examples/text-field-styling-demos

thanks for your response but it’s working only for vaadin-text-field and not for vaadin-combo-box
My code

<vaadin-combo-box   id="bankActionType"  class="ps-background-red-1"   label="Type" ></vaadin-combo-box>

<dom-module id="bakery-combo-box-theme" theme-for="vaadin-combo-box">
  <template>
    <style>
      :host(.ps-background-red-1) [part="input-field"]
 {
        background-color: #ffebeb;
      }

      
    </style>
  </template>
</dom-module>
4

Sergey’s answer in this thread offers a solution. But instead of targeting [part="value"] you should target [part="input-field"] : https://vaadin.com/forum/thread/17197360/

5

Hi,
is there a solution for Java only in Vaadin 13~14?

something like:

TextField name = new TextField();
name.getStyle().set("background-color", "#ffffff");
6

Teodorson Junior:
Hi,
is there a solution for Java only in Vaadin 13~14?

something like:

TextField name = new TextField();
name.getStyle().set("background-color", "#ffffff");

Hi Teodorson,

That would change the background color for the entire component not just the input field. (The component is made up of a label, input field and error message.)

We strongly recommend using DOM modules for theming purposes. You can see how the input field’s background is set here (search for "background-color" as it’s only set for input-field):
https://github.com/vaadin/vaadin-text-field/blob/master/theme/lumo/vaadin-text-field-styles.html

7

Thanks Joacim, is work!

8

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?

9

Use the :host(.classname) CSS selector to only target elements with a specific class name.