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.
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;
}
Or
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
Use can try this :
.select-ios .select-placeholder{
color: #000;
font-size: 15px;
}
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
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?