Select placeholder color


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.


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.


Looks like it might be related to this problem


This should work


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


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

ion-select {
    opacity: 1 !important;


ion-select {
    --opacity: 1 !important;

Yes I’ve tried those


Does this work?

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

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


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


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.


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