SuperBigDecimalField CSS styling

Hi, I have problem setting background color on “vaadin-input-container” element of SuperBigDecimalField, because it gets overridden by :host styling.

I want to achieve the same styling as on DatePicker element on the picture which has white background.

Current css for SuperBigDecimalField:
.sepaSuperDecField .belongs-to-superbigdecimalfield {
border: 2px solid #ffb38a;
border-radius: 4px;
color: black;
padding: 0;
background: white;
}
superDec1.png
image.png

Underlined style is the cause of problem.
superDec3.png

You need to use the part selector:

super-text-field::part(input-field) {
background-color: white;
}

I think that should work

Thank this works. Is there a way to style it in a way to only add background-color on components which have className “white” for example.

Because now all the components across the app gets white background.

Just add the prefix in the css:
.sepaSuperDecField super-text-field::part(input-field) {
background-color: white;
}