Select placeholder color

#1

Does anyone know how to style the placeholder content for an ion-select in ionic 4? I’ve tried ::placeholder, I’ve tried --ion-placeholder-color, I’ve tried throwing !importants at everything, and I’ve tried changing opacities.

No matter what I do the select placeholder is a super light gray that is nearly illegible. This is for an ionic 4 app using Angular in Firefox.

#2

I’ve made some progress. I colored the select itself red using an important declaration and it appears to have some kind of translucency over that item.

#3

Looks like it might be related to this problem https://github.com/ionic-team/ionic/issues/17446

#4

This should work

#5

Nope that doesn’t work. That changes the color but not the opacity. Updating the opacity on that element doesn’t do anything.

#6

And you’re saying you’ve tried these too?

ion-select {
    opacity: 1 !important;
}

Or

ion-select {
    --opacity: 1 !important;
}
#7

Yes I’ve tried those

#8

Does this work?

ion-select .select-placeholder {
    opacity: 1 !important;
}
#9

That doesn’t seem to work but I didn’t try it yet so thanks for asking.

#10

Ok. I’m just trying to parse thru the @ionic/core src on git hub to see which css are available

#11

I decided to go a different route and not use the placeholder. Instead I’m going to use css pseudo-content since in my use case the selected item isn’t shown to the user anyways.

#12

Yeah it seems like with the Shadow Dom, you can only affect the exposed css variables