Ionic 2 - 卡内的离子输入丢失轮廓答案

【问题标题】：Ionic 2 - Ion input inside card loses outlineIonic 2 - 卡内的离子输入丢失轮廓
【发布时间】：2017-07-04 11:34:55
【问题描述】：

我的 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>

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

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

有没有办法让大纲即使放在卡片中也能显示？

【问题讨论】：

卡片里面的输入就是这样工作的，如果你在外面做那个表格的话。卡将按您的预期工作。所以也许改变你正在尝试的东西：D
你有没有找到任何解决方案，似乎在 ios 中不起作用
这正是 Ionic 的工作方式。如果需要在卡片内设置轮廓，则需要在 CSS 中手动完成

标签： css angular ionic2

【解决方案1】：

我做到了

ion-input {
    border-bottom: 0.5px solid map-get($colors, primary);
}

它很简单，并在底部显示所有输入，就像它被聚焦一样。这不是我想要的结果，但比显示空白输入要好。

【讨论】：

【解决方案2】：

这是 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;
}

【讨论】：