How to style [part="value"] of TextField in ComboBox

Flow
1

Hi i have a combobox i tried to style the text to be center with following but with no success. Please help…

 ComboBox<String> durationCb = new ComboBox<>();
 durationCb.addClassName("centercb");

..css..
<dom-module id="my-combo-box-styles" theme-for="vaadin-combo-box">
	<template>
		<style>
		
			:host(.centercb) [part="text-field"]
,
			:host(.centercb) [part="text-field"]
 > [part="value"]
,
			:host(.centercb) [part="text-field"]
 ::slotted([part="value"]
),	
			:host(.centercb) [part="value"]
,			
			:host([part="text-field"]
.centercb) [part="value"]
 ,
			:host(:host(.centercb) [part="text-field"]
) [part="value"]
,						
			{								 
				text-align: center !important; 
			}      	

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

Hi. Styling the components in shadow DOM is only possible using CSS custom properties (this is how browsers work). So the working code for your case looks like this:

<dom-module id="my-combo-box-styles" theme-for="vaadin-combo-box">
	<template>
		<style>
			:host(.centercb) [part="text-field"]
 {
				--my-text-field-text-align: center; 
			}
		</style>
	</template>
</dom-module>

<dom-module id="my-text-field-styles" theme-for="vaadin-text-field">
	<template>
		<style>
			[part="value"]
 {
				text-align: var(--my-text-field-text-align, 'auto'); 
			}
		</style>
	</template>
</dom-module>

Note the second argument for the var() is the default value for property, you should always use reasonable defaults.

3

This will not work (using CSS) as the variable is targetting all text-fields input-field parts, as it is used in the “themeFor” text-fields. However, it is null for all others than the combo-box in which “themeFor”, it specifically is declared and thus known to. In the example below, making the text-fields background unknown.

… or do I miss something?

Main class:

@Theme(value = Lumo.class)
@CssImport(value="./styles/my-textfieldstyles.css", themeFor="vaadin-text-field")
@CssImport(value="./styles/my-comboboxstyles.css", themeFor="vaadin-combo-box")

public class MainView extends VerticalLayout {
        TextField tf1 = new TextField("Textfield 1");
        ComboBox<String> cb1 = new ComboBox<String>("Combo1");
     
        public MainView() {
	        tf1.setClassName("my-textfield");
	        cb1.setClassName("my-combobox");
	        add(tf1,cb1);
        }    
}

my-comboboxstyles.css

:host(.my-combobox) [part="text-field"]
{ 
	--my-cb-background: blue
}

my-textfieldstyles.css:

[part="input-field"]
{
	  background: var(--my-cb-background, 'auto');
}
4

Thanks Niels, you have made a running example! You have helped me a lot. Now I know how to:

  1. Create CSS files affecting a component
  2. Importing to the view
  3. Setting styles to components

That rocks!

5

Can someone help me, I can’t change the input field style, vaadin 10. Because Neils and Ximo solutions, not work for me

ComboBox<String> durationCb = new ComboBox<>();
 durationCb.addClassName("centercb");

..css..
<dom-module id="my-combo-box-styles" theme-for="vaadin-combo-box">
	<template>
		<style>
			<!-- THIS WORKS OK -->
			:host(.centercb) [part="text-field"]
 {
                background-color: transparent;
                font-size: var(--lumo-font-size-xs);
            }
			
			<!-- THIS WORKS OK -->
            :host(.centercb) [part="text-field"]
 [part="clear-button"]
 {
                display: none;
            }
			
			<!-- THIS NOT WORKS -->
            :host(.centercb) [part="input-field"]
,
            :host(.centercb) [part="text-field"]
 [part="input-field"]
 {
                background-color: transparent;
                border: 1px solid var(--lumo-contrast-10pct);
                min-height: 27px;
            }
			<!-- THIS NOT WORKS -->
		</style>
	</template>
</dom-module>