Skip to content

bug: ion-select placeholder has wrong opacity value when labelPlacement="floating" #30402

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
3 tasks done
ReneZeidler opened this issue May 9, 2025 · 0 comments
Open
3 tasks done
Labels
type: bug a confirmed bug report

Comments

@ReneZeidler
Copy link

Prerequisites

Ionic Framework Version

v8.x

Current Behavior

ion-selects with labelPlacement="floating" show their placeholders with full opacity, instead of the --ion-placeholder-opacity (default 0.6 in md mode)

Image

(all selects are artifically styled as expanded in this example, but this issue is also visible when the placeholder is shown during normal use)

Expected Behavior

The placeholder should have the correct opacity (var(--placeholder-opacity)).

Steps to Reproduce

  1. Open the reproduction URL
  2. Click on any floating select to show its placeholder. Alternatively click the button "style as expanded" to artifically style all selects as expanded at the same time.

Code Reproduction URL

https://stackblitz.com/edit/pxhxnc4c-a6vaud9w

Ionic Info

Ionic:

Ionic CLI : 7.2.1
Ionic Framework : @ionic/angular 8.5.7
@angular-devkit/build-angular : 19.2.11
@angular-devkit/schematics : 19.2.11
@angular/cli : 19.2.11
@ionic/angular-toolkit : 12.2.0

Utility:

cordova-res : not installed globally
native-run : not installed globally

System:

NodeJS : v20.19.1 (/usr/local/bin/node)
npm : 10.8.2
OS : Linux 5.0

Additional Information

The CSS rule to unhide the placeholder for floating labels sets the opacity to the fixed value 1, instead of var(--placeholder-opacity).

Image

There is also a related issue visible in this example, where the placeholder overlaps the label when the input is focused, see #30401.

@ionitron-bot ionitron-bot bot added the triage label May 9, 2025
@ShaneK ShaneK added the type: bug a confirmed bug report label May 9, 2025
@ionitron-bot ionitron-bot bot removed the triage label May 9, 2025
@ShaneK ShaneK changed the title bug: ion-select placeholder has wrong opacity when labelPlacement="floating" bug: ion-select placeholder has wrong opacity value when labelPlacement="floating" May 9, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
type: bug a confirmed bug report
Projects
None yet
Development

No branches or pull requests

2 participants