在 ionic 2 中保留禁用的 ion-item 的背景颜色答案

【问题标题】：Keep disabled ion-item's background color in ionic 2在 ionic 2 中保留禁用的 ion-item 的背景颜色
【发布时间】：2018-02-08 07:42:54
【问题描述】：

我试试这个：

  .ion-item:disabled {
    background-color:#ffffff !important;
  }

但它没有效果。我不希望它在禁用时具有灰色背景，我尝试保留原始（白色）颜色。

代码如下：

  <ion-list>
   <button ion-item *ngFor="let item of items [disabled]="!item.enabled" (click)="itemSelected(item)">
    {{ item }}
   </button>  
  </ion-list>

所以如果item.enabled 为假，背景会变灰，但我需要它为白色。

更新：无需在 CSS 中添加任何内容，容器的背景颜色为灰色，并且可能禁用的项目变得透明或其他，但将容器的颜色从灰色更改为白色解决了此问题。

【问题讨论】：

检查ion-item 渲染的内容，你可能有错误的选择器。在您使用ion-item 的地方，您的模板是什么样的？
这是basic list。

标签： ionic2 background-color

【解决方案1】：

button.item[disabled]{
    background-color: #ffffff;
}

【讨论】：

谢谢，还是没有变化，背景还是灰色的。
你能告诉我你的 (click)=itemSelected() 函数吗

【解决方案2】：

通过更改容器的背景颜色，问题得到解决。（此列表所在的容器。）容器的默认背景颜色为灰色。

【讨论】：

【解决方案3】：

大概是这样的：

ion-item [disabled] {
    background-color: #f00;
}

请注意，您将ion-item 定位为一个元素，不是一个类。

下面是对应的标记：

<ion-list>
    <ion-item>
        <ion-label>Normal input</ion-label>
        <ion-input type="text" placeholder="Normal Input"></ion-input>
    </ion-item>
    <ion-item>
        <ion-label>Disabled input</ion-label>
        <ion-input type="text" placeholder="Disabled input" disabled></ion-input>
    </ion-item>
</ion-list>

Here is a Plunker.

【讨论】：

抱歉，这对 iOS 和 Android 都没有影响。禁用的列表项的背景仍然是灰色的。

【解决方案4】：

实际上是不透明度改变了背景颜色，要保留背景颜色，只需将 opacity: 1 添加到要保留背景颜色的任何禁用元素。任何禁用元素的默认不透明度为 0.4。

[已禁用]的 CSS 样式

  a[disabled], button[disabled], [ion-button][disabled] {
  cursor: default;
  opacity: .4;
  pointer-events: none;
  }

【讨论】：