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

Flow
1

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.

2

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

3

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…

4

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