ionic4 離子選擇占位符不透明度不能改變

Question

無法更改 ionic v4 中的占位符不透明度

我試圖改變 global.css 中離子選擇占位符的不透明度

以下是我的代碼

.select-placeholder {
不透明度：1； }

but that didn't works , even i tried all methods to change it's css like

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

etc... but not works fine , event it color change very well using following code 

 ion-select{ color: var(--ion-color-secondary); }

no change , it took default opacity <style> tag.

任何幫助，將不勝感激

已編輯

<ion-select class="contact-us-select" interface="alert" [interfaceOptions]="customPopoverOptions"
        placeholder="selection" cancelText="cancel" okText="done" (ionChange)="onSelectChangevalue($event)">
        <ion-select-option *ngFor="let item of Data" [value]="item.id">{{item?.title}}</ion-select-option>
      </ion-select>

Answer 1

恐怕這是 Ionic 4 的一個錯誤（仍然發生在 Ionic 4.4 中，正如您在這些 github 問題中所見： 17446 、 17166和17248 ）。

不幸的是，由於您無法直接訪問 shadow DOM 來更改該值，因此我們目前無法解決此問題。

一位用戶建議使用標簽作為解決方法（ 此處），甚至修改節點模塊文件夾中的文件（ 此處），但我想更好的解決方法是默認預選第一個值。 因此，例如，如果選項是Phone 、 Email 、 Live Chat ，而不是顯示占位符，您可以默認預選Phone ，直到此錯誤在 Ionic 的核心中得到修復。

Answer 2

global.scss

ion-select{
     opacity: 0.3 !important;
     color: var(--ion-color-secondary);
}

這應該適用於更改全局 scss，您只需要--更改組件中定義的 scss 變量。

Answer 3

 ion-select{ --placeholder-opacity: 1 !important; color:black; }

Answer 4

轉到此路徑： [YOUR_PROJECT_PATH]/node_modules/@ionic/core/dist/esm

查找此文件：

離子選擇_3-ios.entry.js

離子選擇_3-md.entry.js

打開它，找到：

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

將其更改為您想要的

Answer 5

你應該在 css 文件中試試這個：

.select-ios .select-placeholder{
      color: #000;
      font-size: 13px;
}

Answer 6

我認為以下代碼會對您有所幫助，我嘗試了文本框的占位符，它有效。 對於文本框占位符，我的代碼有效，但對於選擇框，我不確定，但是根據您的代碼，我認為以下代碼可能對您有所幫助。 此外，運行代碼片段，我在其中為文本框的占位符編碼。

 select::placeholder {
   opacity:0.5;
 }

 input::placeholder { opacity:0.5; }

 <input type="text" placeholder="Input box">