Question

无法更改离子v4中的占位符不透明度

我曾尝试更改离子选择占位符的不透明度 global.css

以下是我的代码

.select-占位符     {
            不透明度：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

global.scss

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

对于更改全局scss应该很好，您只需要--即可更改组件中定义的scss变量。

Answer 2

转到此路径： [YOUR_PROJECT_PATH]/node_modules/@ionic/core/dist/esm

查找此文件：

ion-select_3-ios.entry.js

ion-select_3-md.entry.js

打开它，然后找到：

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

将其更改为您想要的

Answer 3

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

Answer 4

恐怕这是Ionic 4的一个 bug （正如在以下github问题中所看到的，仍在Ionic 4.4中发生：17446，17166和{{3 }}。

不幸的是，由于您不能直接访问影子DOM来更改该值，因此，我们目前无法做任何事情来解决此问题。

其中一位用户建议使用标签作为解决方法（17248），甚至修改节点模块文件夹中的文件（here），但我猜想更好解决方法是默认情况下预选择第一个值。因此，例如，如果选项为Phone，Email，Live Chat，则无需显示占位符，而是可以默认选择Phone，直到此错误在Ionic的核心中得到修复。

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">

ionic4离子选择占位符的不透明度不能更改

6 个答案: