How to set the background-color of the TextField of the DatePicker

Flow
1

How can I set the color of the TextField of a DatePicker component?

2

Hi Simon,

Not sure if this will help or not. I was styling a TextField a while back. I got sidetracked by other things, but this is what I have in my shared-styles so far.

<dom-module id="minicontrol-style" theme-for="vaadin-text-field vaadin-item">
  <template>
    <style>
       :host([theme="minicontrol"]
) [part="input-field"]
 {
         box-shadow:inset 0 0 0 1px var(--lumo-contrast-30pct);
         background-color:var(--lumo-base-color);
         font-family: var(--lumo-font-family);
     	 font-size: var(--lumo-font-size-xs);
     	 font-weight: 500;
     	 height: var(--lumo-size-s);
       }

       :host([theme="minicontrol"]
 [invalid]
) [part="input-field"]
 {
         box-shadow:inset 0 0 0 1px var(--lumo-error-color);
         border-color: var(--lumo-base-color);
         font-family: var(--lumo-font-family);
     	 font-size: var(--lumo-font-size-xs);
     	 font-weight: 500;
     	 height: var(--lumo-size-s);
       }
    </style>
  </template>
</dom-module>
3

My Problem is that I can add a class to the DatePicker but I have to query for this class but want to style the inner TextField.

How must the selector look like?

4

You can style for a class by including it in the square brackets. Here’s an example of how to remove the “x” (clear button) in a ComboBox:

<!-- Remove clear button on combo boxes -->
<dom-module id="remove-combo-clear-button" theme-for="vaadin-combo-box">
    <template>
        <style>
          :host(.noclearbutton) [part="clear-button"]
{
            display:none;
          }
    </style>
    </template>
</dom-module>

The combobox would look like this:

  <vaadin-form-item id="stateFormItem">
   <label slot="label">State</label>
   <vaadin-combo-box items="[[items]
]" id="state" class="noclearbutton"></vaadin-combo-box>
  </vaadin-form-item>
5

Thanks for all your answers. But it’s still unanswered:

“How can I set the color of the TextField of a DatePicker component?”

The TexField is nested in the DataPicker and I set a className on the DatePicker. How do I access the class in the selector for the TextField of the DataPicker?

6

If you add a theme attribute to your DatePicker component, it will be propagated to the TextField inside it as well. You can then use this theme attribute to style specific TextFields. See this thread for more information: https://vaadin.com/forum/thread/17596415/styling-a-web-component-part-inside-another-web-component

7

Thank you Olli.
It’s kind of a hack but it works.