web-dev-qa-db-ja.com

ionic2は、青い線の色の入力mdを削除します

テキスト入力mdの下のデフォルト行を削除するにはどうすればよいですか。

私はすでに以下のすべてを試しましたが、「デフォルト」のスタイル設定はこの行を維​​持します。

enter image description here

$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";
ionic-frameworkionic2material-design
12
Isabelle

次のコードを使用してみてください。

.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;
40
Gabriel Barreto

!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;
              }
            }
          }
        }
      }
2
Arsen Khachaturyan