Impossible to change the opacity of an ion-select placeholder

[StriderRanger]

Bug Report

Ionic version:

[x] 4.x

Current behavior:

There is no CSS property that makes it possible to change the opacity of the placeholder of an ion-select

Expected behavior:

In the ion-input, there is the --placeholder-opacity property that controls the opacity of an ion-input. It would be helpful to have the same property in the ion-select component.

Steps to reproduce:

Related code:

Other information:

Ionic info:

   ionic (Ionic CLI)             : 4.7.1 
   Ionic Framework               : @ionic/angular 4.0.0
   @angular-devkit/build-angular : 0.11.4
   @angular-devkit/schematics    : 7.2.3
   @angular/cli                  : 7.2.3
   @ionic/angular-toolkit        : 1.2.2

[Sarfarazsajjad]

try this

ion-select {
    opacity: 1 !important;
}

[StriderRanger]

try this

ion-select {
    opacity: 1 !important;
}

Thanks for the reply, but unfortunately It didn't work.
I think that applying the opacity on the ion-select changes the opacity of the whole component and not of the placeholder.

[bmlyon]

I also have this problem.

In Chrome I can see the shadow styles as an inline style tag that says .select-placeholder{opacity: .33};

[FazioNico]

same problem. Any solution to solve ?

[bmlyon]

I ended up using css pseudo content instead of placeholders as a temporary workaround. select:before{content:"whatever the placeholder would have been"}

[ghost]

i have the same problem

[codepiter]

an unorthodox method but it was useful for me to change a js file after compiling:
\ node_modules \ @Ionic \ core \ dist \ esm \ es5 \ build \ j241fzpw.entry.js

select-placeholder {color: currentColor; opacity: 0.33}

for

select-placeholder {color: currentColor; opacity: 1}

I'm not sure but maybe the file in question could vary.

Salu2.

[pbeltrand]

workaround:
I put a label that hides when a value is selected..

<ion-label slot="start" *ngIf="servicio == null">Seleccione el Servicio</ion-label>
<ion-select okText="Seleccionar"  [(ngModel)]="servicio" placeholder="">
     <ion-select-option *ngFor="let item of servicios | async" value="{{ item.id }}">{{ item.nombre }}</ion-select-option>
</ion-select>

[nla-asia]

this issue is still happening

[liquidcms]

I have this issue as well. ion-select placeholder opacity is .33 whereas all other placeholders are .5. Why is this so difficult to fix?

[invot]

Same issue. Kinda a make-or-break problem. These components don't seem very customizable in general. Applying any kind of custom styling feels like rocket science.

[liquidcms]

I ended up using @pbeltrand's hack, which doesn't use placeholder (since it is styled wrong and not modifyable). Uses label instead and hides when a selection is made:

      <ion-item class="input-item">
        <ion-label style="--opacity:.5" slot="start" *ngIf="yearLabel == null">School Year</ion-label>
        <ion-select style="--padding-start: 0px" [(ngModel)]="yearLabel" placeholder="" formControlName="year" >
          <ion-select-option value="FK-AK1">FK-AK1</ion-select-option>
          <ion-select-option value="AK2-AK3">AK2-AK3</ion-select-option>
          <ion-select-option value="AK4-AK5">AK4-AK5</ion-select-option>
          <ion-select-option value="AK6-AK7">AK6-AK7</ion-select-option>
          <ion-select-option value="AK8-GY1">AK8-GY1</ion-select-option>
          <ion-select-option value="Förälder">Förälder</ion-select-option>
        </ion-select>
      </ion-item>

now i am on to my next hack to try to figure out how make ion-menu-button slightly larger; because it is also not changeable...

perhaps we need to wait until Ionic 5 for the team to realize how silly it is to try to guess at how everyone wants their app to look.. :(

[nporchis]

i got the same issue :(.
on my side i took the issue in the other side setting the oppacity of placeholder inputs to .33:

.sc-ion-input-md-h {
--placeholder-opacity: 0.33;
}

[liamdebeasi]

Thanks for the issue. This has been resolved via #19893 and will be available in an upcoming release of Ionic Framework.

[pjc0247]

@liamdebeasi Hi, Is there any way to test the change now? I tried 4.11.5-dev and 4.12.0 but both not worked.

[liamdebeasi]

@pjc0247 This feature will be released in the next major version of Ionic Framework (v5.0). We are rolling out betas, and this feature was released as part of beta 1.

See the changelog for more info: https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md

There are also instructions here for how to upgrade to v5 if you would like to start testing the betas: https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md#500-beta0-2019-10-15

[pjc0247]

@liamdebeasi So, this will not be applied to v4?

[liamdebeasi]

Correct, this feature will not be in v4.

[pjc0247]

i think NObody wants to migrate the entire project for a single CSS property. You may think this is a feature update, but actual users think this is a bug.

[liamdebeasi]

For the purposes of writing changelogs and following semantic versioning, we consider anything that makes additions to the API to be a feature. In this case, a CSS Variable was added to the API.

Most developers will be able to upgrade to v5 with minimal changes to their application. The upgrade path from v4 to v5 is much simpler and faster than the upgrade path from v3 to v4. In some cases, developers may not have to change anything in their application depending on the complexity and scope of their app.

For more information about some of the breaking changes in v5, please see the changelog for the v5 betas:

Breaking changes in beta 1: https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md#breaking-changes
Breaking changes in beta 0: https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md#breaking-changes-1

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.