Vaddin 24 style question: I can only style a Select field partially

Flow
1

I am apply yellow background color to select field by doing:

vaadin-select.GridEditedSelect{
	background-color: #f2e67c; (yellow color)
}

image
but it looked like some grey color overlapping in the middle.

so I thought I should just made the grey area to yellow by doing:

vaadin-select.GridEditedSelect > vaadin-select-value-button {
background-color: #f2e67c;
}

But it looked like this now( I want it to be yellow not just partially):
image

I was trying to troubleshoot by going over the elements on the browser’s developer tools - Elements panel
I do notice when I uncheck the background from :host which inherited from slot
The grey area would go away

image
image885×461 43.4 KB

I am a bit confused now, how can I style this select field to not show the the grey area?
ideally should look like this:
image

2

Did you read the styling documentation? How to style the Select component | Vaadin components

2 Likes
3

Ah! I did not know there is a styling page for components.
I figured out how to do it after going through the link you sent
which is

vaadin-select.GridEditedSelect {
	--vaadin-input-field-background: #f2e67c;
}

Thank you very much!