`mdui-select` should have label CSS Part
Sduby22 opened this issue · comments
there is color inconsistency when using text-field and select components on non-primary-color background (like a secondary container), because their labels are hardcoded background-color: rgb(var(--mdui-color-background))
a work-around is to use ::part(label)
to set the background color manually to match background.
.item::part(label) {
color: rgb(var(--mdui-color-on-secondary-container));
background-color: rgb(var(--mdui-color-secondary-container));
}
Unfortunately, mdui-select
doesn't provide this label CSS part. I have to fallback to @material/web
implementation.
Interestingly, Google's official implementation is a bit more complex but doesn't have this problem. A brief introduction of Google's implementation is as follows:
Google didn't use a color mask. A text-field / select is divided into 3 parts, when user input something and the label will move to top, with the mid "notch" part's top border disappearing.
The select component now exports CSS parts for chip and text-field internals. You can update to 2.1.0 to use it.