离子输入边界底部问题

Question

我有表单字段，我正在验证这些字段。如果验证失败，我在底部显示一条带红线的边框，但它没有完全覆盖离子输入。

  <ion-item>
          <ion-label floating>Vorname</ion-label>
          <ion-input formControlName="vorname" type="text" [class.invalid]="registerform.controls.vorname.touched && registerform.controls.vorname.errors"></ion-input>
        </ion-item>


 .invalid{
      border-bottom: 1px solid rgba(255, 0, 0, 0.71);
    }

Answer 1

首先，你需要在variable.scss android材质设计中覆盖。在这里我粘贴以下代码：

$text-input-highlight-color-valid:#fff;
$text-input-highlight-color-invalid:#fff;

并在.scss

中进行修改

  .invalid{
    border-bottom: 1px solid rgba(255, 0, 0, 0.71);
  }

  .item-md.item-block .item-inner {
    padding-right: 0px !important;
    border-bottom: #fff !important;
  }

然后一切正常