Select placeholder color

Ionic Framework ionic-v3
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

13

Use can try this :
.select-ios .select-placeholder{
color: #000;
font-size: 15px;
}

14

Go to this path:
[YOUR_PROJECT_PATH]/node_modules/@ionic/core/dist/esm

Look for this files:

ion-select_3-ios.entry.js

ion-select_3-md.entry.js

open it, and find:

.select-placeholder{color:currentColor;opacity:.33}

change it to what you want

15

This should work for an individual’s project. In a team setting, the node_modules folder is most likely not going to be tracked by git. Any changes to the node_modules folder will likely not make it to any staging environments for testers. When you upgrade ionic this will be a breaking change. Is there anyway to override these settings in our own application?