Style of vaadin-select-text-field (inside of vaadin-select) only for specif

Hi All!
I made some changes to style of vaadin-select-text-field (inside of vaadin-select).
But I want to have this style only for some Selects, not for all.
I tried to use :host(.with class name), but as I understand vaadin-select-text-field don’t have such class, only his parent - vaadin-select.
How I can do this?

<dom-module id="select-button-style" theme-for="vaadin-select-text-field">
  <template>
    <style>
		[part="input-field"]
 {
			background-image: linear-gradient(var(--lumo-tint-5pct), var(--lumo-shade-5pct));
			box-shadow: inset 0 0 0 1px var(--lumo-contrast-20pct);
		}
    </style>
  </template>
</dom-module>

P.S. I want to have my vaadin-select same like buttons, to make menu.

Hi Oleksii,

You may have to use themes to style get the styling correct. Here are two resources that may (or may not) help:

https://vaadin.com/forum/thread/17609069/how-to-set-the-background-color-of-the-textfield-of-the-datepicker

https://github.com/vaadin/vaadin-themable-mixin#readme

Martin Israelsen:
https://vaadin.com/forum/thread/17609069/how-to-set-the-background-color-of-the-textfield-of-the-datepicker
https://github.com/vaadin/vaadin-themable-mixin#readme

Hi Martin! Thank you for your response, but I still can’t find solution.
Component Select don’t has possibilities to add\set theme:
https://vaadin.com/api/platform/13.0.3/com/vaadin/flow/component/select/Select.html

I tried to use solution from this page (last example):
https://github.com/vaadin/vaadin-themable-mixin#scoping-styles-in-a-theme-module
:host(.special-field) works only for parent object - when I use theme-for="vaadin-select"
But I need same for theme-for="vaadin-select-text-field". Problem that vaadin-select-text-field don’t has needed class, vaadin-select only has. Maybe I miss something…

Hi Oleksii,

I don’t know if you ever found a solution for this, but I just ran into the same issue. Basically, I wanted a select to have the same color as a button.

Found out that the vaadin-select-text-field had to be styled separately:

<dom-module id="select-button" theme-for="vaadin-select"> 
  <template> 
   <style>
       :host([theme="select-button"]
) [part="value"]
,
       :host([theme="select-button"]
) [part="toggle-button"]
 {
       	 color: var(--lumo-button-color, var(--lumo-primary-text-color));
       }

       :host([theme="select-button"]
:hover:not([readonly]
):not([disabled]
)) [part="toggle-button"]
 {
       	 color: var(--lumo-button-color, var(--lumo-primary-text-color));
       }
    </style> 
  </template> 
 </dom-module>
<dom-module id="select-button-text-field" theme-for="vaadin-select-text-field"> 
  <template> 
   <style>
   	   :host([theme="select-button"]
) [part="input-field"]
 {
   	      background: var(--lumo-contrast-5pct);
   	   }
    </style> 
  </template> 
 </dom-module>

Add add “select-button” as the theme to the select.

18286179.png