Ionic framework ionic2删除蓝线颜色输入md

如何删除文本输入md下面的默认行

我已经尝试了下面所有这些，但是“默认”样式仍然保持这一行

---

请尝试使用以下代码：

.item-md.item-input.input-has-focus .item-inner {
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}

.list-md .item-input.input-has-focus:last-child {
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}

.list-md .item-input.input-has-focus:last-child .item-inner {
  box-shadow: none;
}

.item-md.item-input.ng-valid.input-has-value:not(.input-has-focus) .item-inner {
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}

.list-md .item-input.ng-valid.input-has-value:not(.input-has-focus):last-child {
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}

.list-md .item-input.ng-valid.input-has-value:not(.input-has-focus):last-child .item-inner {
  box-shadow: none;
}

.item-md.item-input.ng-invalid.ng-touched:not(.input-has-focus) .item-inner {
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}

.list-md .item-input.ng-invalid.ng-touched:not(.input-has-focus):last-child {
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}

它将删除所有验证行（红色/绿色/蓝色）

编辑 有一种更好的方法可以使用主题化来实现这一点

转到

src/theme

中的

theme.scss

文件并使用此代码

$text-input-md-highlight-color-invalid: transparent;
$text-input-md-highlight-color-valid: transparent;
$text-input-md-show-invalid-highlight: transparent;
$text-input-md-highlight-color: transparent;
$text-input-md-show-valid-highlight: transparent;

---

这是另一个版本，没有

！重要的

关键字：

 ion-content {
    %no-input-border {
      border-bottom-color: transparent;
      box-shadow: none;
    }

    ion-item {
      &.item-input {
        &.item-md {
          &.input-has-focus {
            .item-inner {
              @extend %no-input-border;
            }
          }
        }

        &.ng-invalid {
          &.item-md {
            &.ng-touched:not(.input-has-focus):not(.item-input-has-focus) {
              .item-inner {
                @extend %no-input-border;
              }
            }
          }
        }

        &.ng-valid {
          &.item-md {
            &.input-has-value:not(.input-has-focus):not(.item-input-has-focus) {
              .item-inner {
                @extend %no-input-border;
              }
            }
          }
        }
      }

---

以前版本的ionic有一个属性无行 现在它已经被去除了润滑油

因此，对于最新版本，您应该使用属性--> lines=“无”

例如：

 <ion-item class="textArea" lines="none">
    <ion-textarea autoGrow="true" placeholder="Enter more information here..."></ion-textarea>
  </ion-item>

这将删除蓝线。

---

希望这能帮助你或其他人

尝试在chrome开发工具上检查该元素，可能看起来像.item md.item inner或类似的东西，这是我今天早上的职业；）-不走运，但现在有解决离子3的办法吗？谢谢！我把它改成了非焦点状态，效果很好。item-md.item-input.item内部{边框底色：透明！重要；方框阴影：无！重要；}.list md.item输入：最后一个子项{边框底色：透明！重要；方框阴影：无！重要；}非常好-我想你甚至可以省略上面的代码，只使用variables.scs-更好的解决方案ionic3有解决方案吗？

 <ion-item class="textArea" lines="none">
    <ion-textarea autoGrow="true" placeholder="Enter more information here..."></ion-textarea>
  </ion-item>