css - Ionic 2 - 卡内的 ionic 输入失去轮廓

Question

我的 html 如下所示

<ion-content padding>
  <ion-card>
    <ion-card-header>
      Header
    </ion-card-header>

    <ion-card-content>
      <form (ngSubmit)='someAction()'>

        <ion-item>
          <ion-label stacked>Some Label</ion-label>
          <ion-input name="some-input" type="text" value="some-value"></ion-input>
        </ion-item>

      </form>
    </ion-card-content>
  </ion-card>
</ion-content>

输入通常有一个蓝色的底部轮廓，然后在填充时变成绿色。

但是，当在卡片内部使用时，轮廓仅在单击输入并输入值时出现。

有没有办法让轮廓仍然显示，即使它被放置在卡片中？

Answer 1

这是 ionic 中的一个已知问题 https://github.com/ionic-team/ionic/issues/11640

但是，您可以通过将此代码添加到您的 app.scss 来修复它，直到该问题被团队修复为止。

.card-md .item-md.item-block:not(:last-child) .item-inner {
  border-bottom: 1px solid #dedede;
}

.card-md .item-md.item-block:not(.item-input):not(.item-select):not(.item-radio):not(.item-checkbox) .item-inner {
  border: 0;
}