Question

如何删除文本输入md。

下面的默认行

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

$text-input-md-highlight-color: "transparent";
$text-input-md-highlight-color-invalid : "transparent";
$text-input-md-highlight-color-valid : "transparent";
$text-input-md-background-color : "transparent";
$text-input-md-show-focus-highlight : "transparent";
$text-input-md-show-invalid-highlight: "transparent";
$text-input-md-show-valid-highlight : "transparent";
$text-input-md-show-success-highlight:      false;
$text-input-md-show-error-highlight:        false;
// Input highlight - normal
$text-input-md-highlight-color:             "transparent";

// Input highlight - valid
$text-input-md-hightlight-color-valid:      "transparent";

// Input highlight - invalid
$text-input-md-hightlight-color-invalid:    "transparent";

Answer 1

尝试使用以下代码：

.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;
}

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

修改

使用主题更好的方法。

转到theme.scss内的src/theme文件并使用此代码

$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;

Answer 2

这是另一个版本，没有!imporant关键字：

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

Answer 3

早期版本的ionic具有属性无行现在已被描述

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

示例：

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

这将删除蓝线。希望这对您或其他人有帮助！

ionic2删除蓝线颜色输入md

3 个答案:

修改